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

我试图给出一个 div (位置: 固定)的宽度为100% (与它的父 div 相关)。但我有些问题..。

编辑: 第一个问题是通过使用继承解决的，但它仍然不能工作。我认为问题在于我使用了多个 div，它们采用100%/继承宽度。 您可以在 jsfiddle 更新中找到第二个问题: http://jsfiddle.net/4bGqF/7/

狐狸的例子

#container {
width: 800px;
}


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

还有超文本标记语言

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

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

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

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

非常感谢！

PS: 这两个 div 的文本是叠加在一起的。这只是一个例子，所以这并不重要。

280620 次浏览
小开

使用 CSS:

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


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

固定元素将继承它的父宽度，因此它将是100% 的父宽度。

小开

固定位置应该定义与视口相关的所有内容，所以 position:fixed总是这样做。尝试在子 div 上使用 position:relative。 (我知道你可能会因为其他原因需要固定的位置，但是如果是这样的话-你不能真正让宽度匹配它的父母没有没有 inherit的 JS)

小开
最佳答案

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

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

小开

你也可以用 jQuery 来解决这个问题:

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

这对我非常有帮助，因为我的布局是响应的，而且 inherit解决方案不适合我！

小开

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

在父版本中使用 -webkit-transform: translateZ(0);，当然这是针对 Chrome 的。

Http://jsfiddle.net/senica/bcqea/

-webkit-transform: translateZ(0);
小开

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

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 使用了固定的位置，对内容使用了最大宽度。

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

       .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. 标题下面的内容从来不是不可访问的

据我所知，没有 Javascript 就不能满足这个标准(不幸的是)。

这个解决方案使用 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>

小开

固定的位置是有点棘手(实际上是不可能的) ，但是位置:

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

查看代码样本

小开

您需要给出固定元素及其父元素的相同样式。其中一个示例使用最大宽度创建，另一个示例使用填充创建。 

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

小开

对于使用 jquery 的粘贴头，我仍然是一个 jquery 的学习者，这些 css 设置可以工作。

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

头部位于一个包装 div 中，该包装 div 的最大宽度为1024。


提交答案