将 Fixed div 设置为父容器的 100% 宽度

Posted 2023-04-18

【中文标题】将 Fixed div 设置为父容器的 100% 宽度

【英文标题】：Set a Fixed div to 100% width of the parent container

【发布时间】：2013-07-22 07:49:13

【问题描述】：

我有一个带有一些填充的包装器，然后我有一个具有百分比宽度（40%）的浮动相对 div。

在浮动相对 div 中，我有一个固定的 div，我希望它的大小与其父级相同。我知道从文档流中删除了一个固定的 div，因此忽略了包装器的填充。

html

<div id="wrapper">
  <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
  </div>
</div>

CSS

body  
  height: 20000px 
  
#wrapper 
  padding: 10%;
  
#wrap  
  float: left;
  position: relative;
  width: 40%; 
  background: #ccc; 
 
#fixed  
  position: fixed;
  width: inherit;
  padding: 0px;
  height: 10px;
  background-color: #333;

这是必须的小提琴：http://jsfiddle.net/C93mk/489/

有谁知道实现这个的方法吗？

我已经修改了小提琴以显示我想要完成的更多细节，抱歉造成混淆： http://jsfiddle.net/EVYRE/4/

【参考方案1】：

您可以使用 .wrap 容器的边距代替 .wrapper 的填充：

body height:20000px 
#wrapper  padding: 0%; 
#wrap 
    float: left;
    position: relative;
    margin: 10%;
    width: 40%; 
    background:#ccc; 

#fixed 
    position:fixed;
    width:inherit;
    padding:0px; 
    height:10px;
    background-color:#333;    

jsfiddle

【讨论】：

更新了我的小提琴以更好地解释我在做什么：jsfiddle.net/EVYRE/4

@JackMurdoch，我发现没有 js 的唯一方法是将calc 用于right 和left 属性。看jsfiddle

当包装器缩小到最大宽度（示例中为 600px）以下时，这将不起作用，但我相信你是对的，它不能在 javascript 之外完成。感谢您的帮助。

它真的不起作用，看看这个小提琴jsfiddle.net/EVYRE/4。 #sidebar 宽度将相对于他的父级 (#sidebar_wrap)，但不是，它会溢出他的父级。

我认为这只是因为固定元素和窗口之间只有一个div。如果固定元素多次嵌套在不是 100% 窗口宽度的元素中，这将不起作用

【参考方案2】：

尝试向父级添加变换（不必做任何事情，可以是零平移）并将固定子级的宽度设置为 100%

body height:20000px 
#wrapper padding:10%;
#wrap 
    float: left;
    position: relative;
    width: 40%; 
    background:#ccc; 
    transform: translate(0, 0);

#fixed 
    position:fixed;
    width:100%;
    padding:0px;
    height:10px;
    background-color:#333;

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

【讨论】：

在我的例子中，添加了 position:fixed 的变换取消效果。

【参考方案3】：

this 怎么样？

$( document ).ready(function() 
    $('#fixed').width($('#wrap').width());
);

通过使用 jquery，您可以设置任何类型的宽度 :)

编辑：正如梦在 cmets 中所说，仅仅为了这种效果使用 JQuery 是没有意义的，甚至会适得其反。我为那些在页面上使用 JQuery 的人制作了这个例子，并考虑在这部分也使用它。对于我的回答给您带来的任何不便，我深表歉意。

【讨论】：

“在浮动的相对 div 内部，我有一个固定的 div，我希望它的大小与其父级相同” - 在“#wrap”内部，他有“#fixed”，他喜欢这样大小为'#wrap' div（高度已设置，所以我没有更改它）。请解释一下我没有得到它的哪一部分？结果的哪一部分与其他答案不同？

嘿伙计，无意冒犯。实际上问题是在 css 中提供答案，为此您介绍了 jQuery，这应该是建议而不是答案。

我知道我什至赞成其他解决方案的边距，但我不明白为什么没有人可以放置 jquery 解决方案。想象一下，如果从现在起 5-6 个月后，有人通过 google 找到这个问题并认为 jquery 解决方案更适合他的情况？

我同意您的解决方案在 jquery 范围方面是完美的，但在纯 css 方面却不是。当我不使用 Jquery lib 时，您是否希望我使用它只是因为我在 jquery 中找到了一个简单的解决方案，就像您发布的那样。一个 Jquery lib 文件是 32 KB 压缩/91.6 KB（生产模式）/252 KB（开发模式）。如果不值得的话，使用 jQuery lib 真的不可行。 jQuery 的一个可能缺点或网站性能方面的关键点

如果您调整窗口大小，则会中断。现在你必须进行 onresize 计算，很酷，听起来很昂贵。 nty

【参考方案4】：

您可以使用绝对定位将页脚固定到父 div 的底部。我还在包装中添加了 10px padding-bottom（与页脚的高度匹配）。绝对定位是相对于父 div 而不是流之外的，因为你已经给了它 position relative 属性。

body height:20000px 
#wrapper padding:10%;
#wrap 
    float: left;
    padding-bottom: 10px;
    position: relative;
    width: 40%; 
    background:#ccc; 

#fixed 
    position:absolute;
    width:100%;
    left: 0;
    bottom: 0;
    padding:0px;
    height:10px;
    background-color:#333;

http://jsfiddle.net/C93mk/497/

【讨论】：

我最初尝试过这个，但问题是当你滚动它时它会随着其余的 div 一起移动，因此它并不是真正的固定定位行为

【参考方案5】：

你的容器是父元素宽度的 40%

但是当你使用 position:fixed 时，宽度是基于 viewport(document) 宽度...

想一想，我意识到你的父元素有 10% 的填充（左右），这意味着你的元素有 80% 的总页面宽度。所以你的固定元素必须有 40% 基于总宽度的 80%

所以你只需要将你的#fixed 类更改为

#fixed 
    position:fixed;
    width: calc(80% * 0.4);
    height:10px;
    background-color:#333;

如果您使用 sass、postcss 或其他 css 编译器，则可以使用变量来避免在更改父元素的填充值时破坏布局。

这是更新的小提琴http://jsfiddle.net/C93mk/2343/

希望对你有帮助，问候

【参考方案6】：

在您最新的jsfiddle 之上，您只是错过了一件事：

#sidebar_wrap 
  width:40%;
  height:200px;
  background:green;
  float:right;

#sidebar 
  width:inherit;
  margin-top:10px;
  background-color:limegreen;
  position:fixed;
  max-width: 240px; /*This is you missed*/

但是，这将如何解决您的问题？很简单，让我们先解释一下为什么比预期的要大。

固定元素#sidebar 将使用窗口宽度大小作为基础来获得自己的大小，就像其他所有固定元素一样，一旦在此元素中定义width:inherit 和#sidebar_wrap 具有40% 作为宽度值，然后将计算window.width * 40%，那么当你的窗口宽度大于.container宽度时，#sidebar将大于#sidebar_wrap。

这样，您必须在#sidebar_wrap 中设置一个最大宽度，以防止大于#sidebar_wrap。

检查这个jsfiddle，它显示了一个工作代码并更好地解释它是如何工作的。

【参考方案7】：

删除 Padding: 10%; 或使用 px 代替 percent 来表示 .wrap

查看示例： http://jsfiddle.net/C93mk/493/

HTML：

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

CSS：

body height:20000px 
#wrapper padding:10%;
#wrap 
    float: left;
    position: relative;
    width: 200px; 
    background:#ccc; 

#fixed 
    position:fixed;
    width:inherit;
    padding:0px;
    height:10px;
    background-color:#333;

【讨论】：

他需要宽度为#wrap 的百分比。但你已经把一个固定的。

这和手动设置固定元素的宽度是一样的，完全没有帮助