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

I have div1 nested inside a fixed positioned parent div called frame and div2 which has many rows of text. I want div1 to be the width of the page(100%), but it is being resized to as far as the text goes. is there a way get it to 100% and keep the frame div fixed. this jsfiddle demonstrates my problem. Thank you.

我有一个div1嵌套在一个固定的父div中,它被称为frame和div2,它有很多行的文本。我希望div1是页面的宽度(100%),但它正在调整大小到文本的大小。有没有办法让它达到100%并保持帧div固定。这个jsfiddle展示了我的问题。谢谢。

#div1 {
  border: 1px solid red;
  width: 100%;
}

#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>

3 个解决方案

#1

Css edit

#frame {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
}

#2

This will work for you.

这对你有用。

You could always use vw for getting the #div1 to the page full width irrespective of its content or its parent's width.

您可以随时使用vw将#div1设置为页面的全宽,而不管其内容或其父级的宽度。

Go with 100vw = 100% of the View Port Width

使用100vw = 100%的View Port Width

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>

One more thing if you want to be more specific about it you can also use cal() for clearing the border pixels.

还有一件事,如果你想更具体一点,你也可以使用cal()来清除边框像素。

calc(100vw - 2px) = 100% of the View Port Width - border width

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>

#3

#div1 will be as big as it's parent in this case #frame that is what 100% means.

在这种情况下,#div1将与它的父级一样大#frame是100%的意思。

Solution 1. [Recomended] Set #frame size E.g. width: 100%;

解决方案1. [推荐]设置#frame size E.g.宽度:100%;

Solution 2. Set #div1 width based on your view port size E.g. width: 100vw;

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

#1