设置“位置：固定”div 相对于父 div 的宽度答案

【问题标题】：Set width of a "Position: fixed" div relative to parent div设置“位置：固定”div 相对于父 div 的宽度
【发布时间】：2011-08-17 22:19:49
【问题描述】：

我正在尝试为 div（位置：固定）提供 100% 的宽度（与其父 div 相关）。但是我有一些问题......

编辑：第一个问题是用inherit解决的，但还是不行。我认为问题在于我使用了多个 div，它们的宽度为 100%/继承。可以在jsfiddle更新中找到第二个问题：http://jsfiddle.net/4bGqF/7/

狐狸示例

#container {
    width: 800px;
}

#fixed {
    position: fixed;
    width: 100%;
}

和html

<div id="container">
    <div id="fixed">Sitename</div>
    <p>
        blaat
    </p>
</div>

或者你也可以试试：http://jsfiddle.net/4bGqF/

问题似乎是固定元素总是占用窗口/文档的宽度。有谁知道如何解决这个问题？

我不能给我的固定元素一个固定的，因为我正在使用 jScrollPane 插件。是否有滚动条取决于内容。

非常感谢！

PS：2 个 div 的文本彼此重叠。这只是一个例子，所以并不重要。

【问题讨论】：

在下面查看我的答案，它提供了对inherit 的一些额外见解，以及如何将max-width:inherit 与width:inherit 结合使用，在保持响应和可管理性的同时保持容器/包含的比率相同

标签： jquery css jquery-plugins

【解决方案1】：

我不确定第二个问题是什么（基于您的编辑），但如果您将 width:inherit 应用于所有内部 div，它可以工作：http://jsfiddle.net/4bGqF/9/

您可能希望为需要支持但不支持 width:inherit 的浏览器寻找 javascript 解决方案

【讨论】：

+1 是一个非常简单的解决方案，尽管width: inherit 不是我首先想到的
如果#container 宽度在宽度 = 100px 的 div 内为 50%（则容器宽度为 50px，固定宽度为浏览器宽度的 50%），知道如何解决这个问题吗？
继承父级宽度的技巧只有在父级具有以 px 为单位的设置宽度时才有效。
这是一个非常糟糕的答案......它基本上相当于设置常量值，这根本不是很有用。
如果容器使用 % 的宽度如何解决这个问题？

【解决方案2】：

正如许多人评论的那样，响应式设计通常将宽度设置为 %

width:inherit 将继承 CSS 宽度 而不是 计算宽度 -- 这意味着子容器继承 width:100%

但是，我认为，响应式设计设置max-width 的频率几乎一样，因此：

#container {
    width:100%;
    max-width:800px;
}
#contained {
    position:fixed;
    width:inherit;
    max-width:inherit;
}

这非常令人满意地解决了我将粘性菜单“卡住”时限制在原始父级宽度的问题

如果视口小于最大宽度，则父级和子级都将遵守width:100%。同样，当视口更宽时，两者都将遵循max-width:800px。

它与我已经响应的主题一起工作，我可以改变父容器而不必改变固定的子元素——优雅而灵活

ps：我个人认为IE6/7不使用inherit987654327@

【讨论】：

很好的答案！就我而言，添加min-width: inherit 就可以了。
这适用于宽度定义为 px 和百分比的父元素。在我看来应该是正确的答案。

【解决方案3】：

固定位置有点棘手（确实不可能），但 position:sticky 做得很好：

<div class='container'>
  <header>This is the header</header>
  <section>
    ... long lorem ipsum
  </section>
</div>


body {
  text-align: center;  
}

.container {
  text-align: left;
  max-width: 30%;
  margin: 0 auto;
}


header {
  line-height: 2rem;
  outline: 1px solid red;
  background: #fff;
  padding: 1rem;

  position: sticky;
  top: 0;
}

see the codepen sample

【讨论】：

Sticky 做到了！谢谢。
谢谢！这对我有帮助！
对于任何试图做粘性 footer 的人的仅供参考：它只有在它后面有一个兄弟元素时才有效。所以只要在它下面扔一个空的 div（你可能需要给底部的 div 一个高度）。

【解决方案4】：

你也可以通过jQuery来解决：

var new_width = $('#container').width();
$('#fixed').width(new_width);

这对我很有帮助，因为我的布局是响应式的，而 inherit 解决方案对我不起作用！

【讨论】：

错误答案，如果您调整窗口大小，则会中断。
应该真的有一个window.onresize事件处理程序。
这就是方法。可以包装成一个函数 setWidth()，然后在“加载”和“调整大小”窗口事件监听器上调用它
这对我来说效果很好！我遇到了一个问题，父母是宽度：25％，所以宽度：继承使每个孩子宽度：25％。

【解决方案5】：

使用这个 CSS：

#container {
    width: 400px;
    border: 1px solid red;
}

#fixed {
    position: fixed;
    width: inherit;
    border: 1px solid green;
}

#fixed 元素将继承它的父宽度，因此它将是该宽度的 100%。

【讨论】：

IE6-7 除外，不支持inherit。不确定这是否重要。
非常感谢。当我在示例中尝试但不在我的代码中尝试时，它可以工作......无论如何，这是我在这里提出的问题的答案。它可能不起作用的另一个原因......但是，谢谢！
在没有明确设置宽度的情况下不使用块元素

【解决方案6】：

固定定位应该定义与视口相关的所有内容，因此position:fixed 总是会这样做。尝试在子 div 上使用 position:relative。（我意识到您可能出于其他原因需要固定定位，但如果是这样 - 如果没有 inherit，您无法真正使其宽度匹配它的父级而没有 JS）

【讨论】：

@Downvoter - 你能解释一下吗？我不反对投反对票，但我想知道为什么，这样我可以在未来改进我的答案。
您的解释很好，但是您说“没有JS，您无法真正使其宽度匹配它的父级”。虽然在某些情况下是可能的（通过使用继承）。
哦，当然。我忘记了继承，因为我经常针对 IE，只有 IE9+ 支持它。
甚至微软也希望 IE 消失——考虑到这篇原始帖子的历史，我认为可以肯定地说 IE 问题没有实际意义。如果强烈建议不要支持 IE，除非您专门为此类支持计费 - 并且按小时计费！

【解决方案7】：

这是我们在修复大型应用的一些重绘问题时遇到的一个小技巧。

在父级上使用-webkit-transform: translateZ(0);。当然，这是特定于 Chrome 的。

http://jsfiddle.net/senica/bCQEa/

-webkit-transform: translateZ(0);

【讨论】：

这解决了宽度问题，但它使孩子相对于视口不固定。
很抱歉投了反对票，因为这完全违背了 position:fixed 的目的。
我认为你没有读过这个问题。它说，如何使 div 与具有“固定”位置的父级“相对”。 THAT TOO 是反固定位置。我的回答清楚地说，“黑客”。当它让您更接近您的解决方案时，它不会破坏目的。

【解决方案8】：

对于带有 jquery 的粘性标题，我仍然是 jquery 的学习者，这些 css 设置有效。

header.sticky{
    position: fixed;
    border-radius: 0px;
    max-height: 70px;
    z-index: 1000;
    width: 100%;
    max-width: inherit;
}

标题位于最大宽度为 1024 的包装 div 内。

【讨论】：

【解决方案9】：

有一个简单的解决方案。

我为父 div 使用了固定位置，为内容使用了最大宽度。

您不需要过多考虑其他容器，因为固定位置仅相对于浏览器窗口。

       .fixed{
            width:100%;
            position:fixed;
            height:100px;
            background: red;
        }

        .fixed .content{
            max-width: 500px;
            background:blue;
            margin: 0 auto;
            text-align: center;
            padding: 20px 0;
        }

<div class="fixed">
  <div class="content">
     This is my content
  </div>
</div>

【讨论】：

【解决方案10】：

此解决方案符合以下条件

父级允许使用百分比宽度
调整窗口大小后工作
标题下的内容永远无法访问

据我所知，没有 Javascript 就无法满足这个条件（很遗憾）。

此解决方案使用 jQuery，但也可以轻松转换为 vanilla JS：

function fixedHeader(){
  $(this).width($("#wrapper").width());
  $("#header-filler").height($("#header-fixed").outerHeight());
}

$(window).resize(function() {
  fixedHeader();
});

fixedHeader();

#header-fixed{
  position: fixed;
  background-color: white;
  top: 0;
}
#header-filler{
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="header-fixed">
  This is a nifty header! works even when resizing the window causing a line break
</div>
<div id="header-filler"></div>

[start fluff]<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
[end fluff]

</div>

【讨论】：

【解决方案11】：

你需要赋予固定元素和它的父元素相同的样式。其中一个示例使用最大宽度创建，另一个示例使用填充创建。

* {
  box-sizing: border-box
}
body {
  margin: 0;
}
.container {
  max-width: 500px;
  height: 100px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: lightgray;
}
.content {
  max-width: 500px;
  width: 100%;
  position: fixed;
}
h2 {
  border: 1px dotted black;
  padding: 10px;
}
.container-2 {
  height: 100px;
  padding-left: 32px;
  padding-right: 32px;
  margin-top: 10px;
  background-color: lightgray;
}
.content-2 {
  width: 100%;
  position: fixed;
  left: 0;
  padding-left: 32px;
  padding-right: 32px;
}

<div class="container">
  <div class="content">
    <h2>container with max widths</h2>
  </div>
</div>

<div class="container-2">
  <div class="content-2">
    <div>
      <h2>container with paddings</h2>
    </div>
  </div>
</div>

【讨论】：