Question

我div1嵌套在一个名为frame和div2的固定定位父div中，该div有许多行文本。我希望div1是页面的宽度（100％），但它正在调整大小到文本的大小。有没有办法让它100%并保持frame div固定。这个jsfiddle证明了我的问题。谢谢。

＆＃13;

#div1 {
  border: 1px solid red;
  width: 100%;
}

#div2 {
  position: absolute;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
}

#frame {
  position: fixed;
}

＆＃13;

<div id="frame">
  <div id="div1">i should be as wide as the page</div>
</div>
<div id="div2">
  <p>x</p>
</div>

＆＃13;

Answer 1

Css编辑

df.set_index('Timestamp').asfreq('h').rolling(6).mean().shift(-5)

                         Value
Timestamp                     
2017-11-22 09:00:00  16.638890
2017-11-22 10:00:00  16.418625
2017-11-22 11:00:00  12.837002
2017-11-22 12:00:00  11.649211
2017-11-22 13:00:00  10.121633
2017-11-22 14:00:00  11.226932
2017-11-22 15:00:00   9.896150
2017-11-22 16:00:00        NaN
2017-11-22 17:00:00        NaN
2017-11-22 18:00:00        NaN
2017-11-22 19:00:00        NaN
2017-11-22 20:00:00        NaN

Answer 2

这对你有用。

无论内容或 ，您都可以始终使用vw获取页面全宽#div1其父母的宽度。

使用100vw = 100％的查看端口宽度

body{margin:0px;}
#div1 {
  border: 1px solid red;
  width: 100vw;
  position:relative;
}

#div2 {
  position: absolute;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
}

#frame {
  position: fixed;
}

<div id="frame">
  <div id="div1">i should be as wide as the page</div>
</div>
<div id="div2">
  <p>x</p>
</div>

如果您想更具体一点，还可以使用 cal() 来清除边框像素。

calc(100vw - 2px) =视口宽度的100％ - 边框宽度

body {
  margin: 0px;
}

#div1 {
  border: 1px solid red;
  width: calc(100vw - 2px);
  position: relative;
}

#div2 {
  position: absolute;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
}

#frame {
  position: fixed;
}

<div id="frame">
  <div id="div1">i should be as wide as the page</div>
</div>
<div id="div2">
  <p>x</p>
</div>

Answer 3

#div1将与父一样大，在这种情况下#frame就是100％的意思。

解决方案1. [推荐]设置#frame大小例如。 width: 100%;

解决方案2.根据您的视口尺寸设置#div1宽度。 width: 100vw;

得到固定位置父div内的div为100％宽度

3 个答案: