Question

当我的位置绝对时，我试图将盒子宽度设为100％？

以下图片是我想要制作的

https://i.imgur.com/qMaT361.gif

<div class="box1">
 <div class="box2">
  float
 </div>
</div>

.box1 { position:relative; width:500px; height:100px; margin:0 auto; overflow:visible; background:#f1f1f1;}
.box2 { position:absolute; top:10px; right:0; left:0; width:100%; height:50px; background:red; }

演示：https://jsfiddle.net/otkg9nfh/8/

请帮助〜

Answer 1

当div设置为绝对位置时，div将获取父div设置的边界（相对位置）。如果你想在浏览器屏幕上做100％的div，你必须将div位置固定为绝对

.box1 { position:relative; width:500px; height:100px; margin:0 auto; overflow:visible; background:#f1f1f1;}
.box2 { position:fixed; top:10px; left:0; right:0; width:100%; height:50px; background:red; }

<div class="box1">
 <div class="box2">
  float
 </div>
</div>

Answer 2

您可以使用视口宽度width:100vw

.box1 { position:relative; width:500px; height:100px; margin:0 auto; overflow:visible; background:#f1f1f1;}
.box2 { position:relative;     width: 100vw; height:50px; background:red; }

<div class="box1">
<div class="box2">
  float
 </div>
</div>

Answer 3

＆＃13;

.box{position: relative;}
.box1 { width:500px; height:100px; margin:0 auto; overflow:visible; background:#f1f1f1;}
.box2 { position:absolute; top:10px; left:35.55%; right:0; width:100%; height:50px; background:red;}

＆＃13;

<div class="box">
  <div class="box1">
     <div class="box2">
      float
     </div>
  </div>
</div>

＆＃13;

如果你想让div从左边开始使用绝对的空格，那么就这样做。

Answer 4

你可以2路

一个是使用position: fixed。但是你会失去基于它的父母的相对定位。因为当您应用fixed时，它会逐出常规文档流，并认为该主体是其父级。

如果您想保留calc()，则使用position; absolute的另一种方式。

.box2 { position:absolute; top:10px; right:0; left:calc(250px - 50vw); width:100vw; height:50px; background:red;}

这里left:calc(250px - 50vw);用于使元素居中。 250px父容器的一半大小和50vw确保窗口垂直宽度的一半大小。

Answer 5

你的问题仍然不清楚你想要的元素是什么＆＃34; 100％＆＃34;但是假设它是父母的父母（在这种情况下是文档正文），您只需从position:relative;删除.box1。

https://developer.mozilla.org/en-US/docs/Web/CSS/position#Types_of_positioning

绝对定位的元素是其计算的位置值是绝对或固定的元素。 top，right，bottom和left属性指定元素包含块的边缘的偏移量。 （包含块是元素相对定位的祖先。）如果元素有边距，则将它们添加到偏移量中。

＆＃13;

.box1 {
  width: 500px;
  height: 100px;
  margin: 0 auto;
  overflow: visible;
  background: #f1f1f1;
}

.box2 {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
  background: red;
}

＆＃13;

<div class="box1">
  <div class="box2">
    float
  </div>
</div>

＆＃13;

正如Shahil M建议的那样，你也可以从box1中删除box2。最终你需要改变你的标记或css。通常情况下，当事情不起作用时，您可能想要重新审视为什么您开始构建这样的事情。通常，当您应用绝对定位时，您希望父项充当包含块。

如何设置Div（绝对）宽度100％

5 个答案: