设置相对于父div的"Position:fixed"div的宽度

Question

我试图给一个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/

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

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

非常感谢!

PS:2个div的文本是相互重叠的.这只是一个例子,所以这并不重要.

Answer 1

我不确定第二个问题是什么(根据你的编辑),但如果你适用width:inherit于所有内部div,它的工作原理:http://jsfiddle.net/4bGqF/9/

您可能希望查看需要支持且不支持的浏览器的JavaScript解决方案 width:inherit

Answer 2

固定位置有点棘手（确实不可能），但是 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;
}

查看代码笔示例

Answer 3

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

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

Answer 4

使用这个CSS:

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

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

#fixed元素将继承它的父宽度,因此它将是100%.

Answer 5

您也可以通过jQuery解决它:

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

这对我很有帮助,因为我的布局很敏感,inherit解决方案不适合我!

Answer 6

固定定位应该定义与视口相关的所有内容,因此position:fixed总是这样做.尝试使用position:relative子div而不是.(我意识到你可能因为其他原因需要固定定位,但如果是这样的话 - 你不能真正使宽度与没有的JS匹配它的父级inherit)

Answer 7

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

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

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