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

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

编辑： 第一个问题是通过使用继承解决的，但它仍然无法正常工作。我认为问题是我正在使用采用100％/继承宽度的多个div。您可以在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/

问题似乎是固定元素始终采用window / document的宽度。有人知道如何解决吗？

我无法使用我的固定元素进行固定，因为我正在使用jScrollPane插件。是否有滚动条取决于内容。

非常感谢！

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

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

您可能需要针对需要支持但不支持的浏览器寻找JavaScript解决方案 width:inherit

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

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不使用没关系 inherit

固定位置有点棘手（实际上是不可能的），但位置：粘性可以很好地完成技巧：

<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;
}

看到codepen样本

您也可以通过jQuery解决：

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

这对我很有帮助，因为我的布局反应灵敏，并且inherit解决方案对我不起作用！

使用此CSS：

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

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

#fixed元素将继承其父级宽度，因此将为其100％。

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

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

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

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

-webkit-transform: translateZ(0);

有一个简单的解决方案。

我为父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>

该解决方案符合以下条件

1. 父级上允许的宽度百分比
2. 窗口大小调整后有效
3. 标头下方的内容永远不可访问

据我所知，没有Java语言就不能满足这个标准（不幸的是）。

此解决方案使用jQuery，但也可以轻松转换为原始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>

您需要提供与fixed元素及其父元素相同的样式。这些示例中的一个示例使用最大宽度创建，而另一个示例中使用填充。

* {
  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>