将固定的div设置为父容器的100％宽度

Question

将固定的div设置为父容器的100％宽度

91

我有一个带有一些padding的包装器，然后我有一个浮动相对定位的div，其宽度为百分比（40%）。

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

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

这里是必要的fiddle示例：http://jsfiddle.net/C93mk/489/

有人知道如何实现这个吗？

我已经修改了fiddle示例，以展示我想要实现的更多细节，对于造成的混乱，我感到非常抱歉： http://jsfiddle.net/EVYRE/4/

- Jack Murdoch

7个回答

9

尝试在父级元素上添加一个 transform（可以是任何内容，甚至是零位移），并将固定子元素的宽度设置为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>

- Wojtek Kochanowski

在我的情况下，添加transform取消了position:fixed的效果。 - mikiqex

2

“您的容器宽度为父元素的40%。但是当您使用position:fixed时，宽度基于视口（文档）宽度......考虑一下，我意识到您的父元素有10％的填充（左右），这意味着您的元素占总页面宽度的80％。因此，您的固定元素必须基于总宽度的80％的40％。所以，您只需要将您的#fixed类更改为：”

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

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

这里是更新后的Fiddle http://jsfiddle.net/C93mk/2343/ 希望对您有所帮助，问候。

- LuizAsFight

2

这个怎么样？这里有更多相关的IT技术内容。

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

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

编辑：如评论中所述，仅为此效果使用JQuery是毫无意义甚至是适得其反的。我制作了这个示例供那些在页面上使用jQuery进行其他内容并考虑将其用于此部分的人使用。对于我的回答造成的任何不便，我深表歉意。

- Hristo Valkanov

2

朋友，不要误会。实际上问题是要提供CSS答案，而你介绍了jQuery，这应该是建议而不是答案。 - dreamweiver

1

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

哈哈哈，除非有人说他在使用jQuery或者他已经在问题中标记了jQuery，否则我们不能假设什么，伙计 :) 你真的不能认真对待这个问题。仅仅因为jQuery很出名，并不意味着所有的网站都必须强制使用它 :) 现在有些网站只使用CSS3就可以了 :) - dreamweiver

在你的问题中明显地展示错误会撤销你的负评。编程愉快 :) - dreamweiver

4

如果调整窗口大小，这将会出现问题。现在你需要进行onresize的计算，听起来比较耗费资源。nty。 - Jay

显示剩余3条评论

1

你可以使用绝对定位将页脚固定在父级div的底部。我还向wrap添加了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/

- MattP

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

0

在你最新的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中设置max-width，以防止其变得比#sidebar_wrap更大。

请查看jsfiddle，其中展示了一个工作代码并更好地解释了其工作原理。

- Vagner

-3

移除 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;

}

- Mohammad Masoudian

他需要#wrap的宽度以百分比为单位，但你却设置了固定宽度。 - Achintha Samindika

这与手动设置固定元素的宽度相同，完全没有帮助。 - Jay

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- YD1m · Accepted Answer

你可以对 .wrap 容器使用 margin，而不是对 .wrapper 使用 padding：

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