如何使固定位置 div 继承 flex 大小的父级的宽度？
[英]How to make fixed position div inherit width of flex sized parent?
问题描述
I have a setup with two flexbox sized divs, inside of one I have a header that is set to position fixed.
我有一个带有两个 flexbox 大小的 div 的设置，在一个里面我有一个设置为位置固定的标题。 How would I make it so its width is 100% of the parent?我将如何使其宽度为父级的 100%？ It needs to stay inside the parent regardless of it's width.无论宽度如何，它都需要留在父级内部。 Thanks.谢谢。
.block1 { height: 102.5%; margin: 0px; padding: 0px; flex-basis: 35%; flex-grow: 1; flex-shrink: 1; position: relative; overflow: scroll; background-color: white; outline: solid red 1px; } .block2 { outline: solid red 1px; height: 102.5%; margin: 0px; padding: 0px; flex-basis: 65%; flex-grow: 1; flex-shrink: 1; position: relative; overflow: scroll; background-color: white; } .header { position: fixed; background-color: red; width: 100%; z-index: 2; } .container { width: 100%; height: 70%; display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; margin: 0px; outline: solid blue 1px; }
<div class="container"> <div class="block1"> <div style="height:200px;"> <div class="header">ff</div> <div style="height:500px;"> ff </div> </div> </div> <div class="block2"> <div style="height:200px;"> ff </div> </div> </div>
https://jsfiddle.net/nurqcq3e/ https://jsfiddle.net/nurqcq3e/
3 个解决方案
解决方案1
4 2018-05-22 18:30:55
You need to create a new containing block for the position: fixed element.您需要为位置创建一个新的包含块position: fixed元素。 By default, using position: fixed pulls that element out of the document flow and positions it relative to the initial containing block established by the viewport (ie, the <body> ).默认情况下，使用position: fixed将该元素从文档流中拉出并将其相对于视口建立的初始包含块（即<body> ）定位。 MDN has a great overview of this property : MDN 对这个属性有一个很好的概述：
The element is removed from the normal document flow, and no space is created for the element in the page layout.
This value always creates a new stacking context.
I went ahead and updated your code snippet to illustrate:我继续更新您的代码片段以说明：
.block1 { height: 102.5%; margin: 0px; padding: 0px; flex-basis: 35%; flex-grow: 1; flex-shrink: 1; position: relative; overflow: scroll; background-color: white; outline: solid red 1px; /* Necessary to become containing block for position: fixed child */ transform: translate3d(0, 0, 0); } .block2 { outline: solid red 1px; height: 102.5%; margin: 0px; padding: 0px; flex-basis: 65%; flex-grow: 1; flex-shrink: 1; position: relative; overflow: scroll; background-color: white; } .header { position: fixed; background-color: red; width: 100%; z-index: 2; } .container { width: 100%; height: 70%; display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; margin: 0px; outline: solid blue 1px; }
<div class="container"> <div class="block1"> <div style="height:200px;"> <div class="header">ff</div> <div style="height:500px;"> ff </div> </div> </div> <div class="block2"> <div style="height:200px;"> ff </div> </div> </div>
解决方案2
0 2018-05-22 16:38:17
Try changing position from 'relative' to 'absolute' for a 'header' class.尝试将“头”类的位置从“相对”更改为“绝对”。 If that does not help, can you provide some mock up?如果这没有帮助，你能提供一些模型吗？
解决方案3
0 2020-07-09 20:19:00
Dirty workarund肮脏的解决方法
It's based on situation when fixed div contains text that expands it width.它基于固定 div 包含扩展其宽度的文本的情况。
If you add to .header div like below with long text it should do the job.如果你像下面这样用长文本添加到 .header div，它应该可以完成这项工作。
<div style="height: 0; overflow: hidden">
Lorem ipsum dolor sit amet, ...
</div>
https://jsfiddle.net/6pwa7vxb/1/ https://jsfiddle.net/6pwa7vxb/1/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.