相對內部絕對定位，寬度為100％

Question

無論如何，有沒有將絕對元素的寬度設置為100％並在相對元素內部適合屏幕（而非父級）？ 這是我的代碼

<div class="relative">

     ...

     <div class="absolute"></div>

     ...

</div>

CSS代碼：

.relative{

position:relative;
width:600px;
}

.absolute{

border:1px solid red //draw a line across screen

position:absolute;
width:100%;
}

Answer 1

是的，您可以使用等於窗口寬度的100vw ，也可以使用calc來定位絕對元素。 因此，如果父元素的寬度為50%以將絕對元素定位到窗口的left: 0 ，則可以使用transform: translate(calc(-100vw + 75%)) ，在這種情況下，該值等於-25vw 。

 html, body { box-sizing: border-box; margin: 0; padding: 0; } .relative { position: relative; width: 50%; background: lightblue; height: 50px; margin: 0 auto; } .absolute { position: absolute; left: 0; background: black; height: 2px; top: 50%; width: 100vw; transform: translate(calc(-100vw + 75%), -50%); } 

 <div class="relative"> <div class="absolute"></div> </div> 

Answer 2

為該行添加一個1px高的div，並將其寬度設置為100vw。

的HTML

<div class="relative">

     ...

     <div class="absolute"></div>
    <div class="line"></div>
     ...

</div>

的CSS

.relative{
  position:relative;
  width:600px;
}
.line {
  height:1px;
  width:100vw;
  background:red;
}
.absolute{
  position:absolute;
  width:100%;
}

小提琴https://jsfiddle.net/3ysh1rwt/2/

Answer 3

剛左設置：20px； 右：20px； 並去除寬度：100％

.box2 {
    position: absolute;
    padding: 50px 0;
    color: #000;
    background: #fff;
    border: solid thin #06F;
}

或向左添加：20px； 和calc函數的寬度：calc（100％-40px）

.box2 {
position: absolute;
width: calc( 100% - 40px );
padding: 50px 0;
color: #000;
background: #fff;
border: solid thin #06F;
}

Answer 4

嘗試這個，

body{
  margin:0;
}
.relative{
  position:relative;
}

.absolute{
width:100%;
height:1px;
background:red;
position:absolute;
}

Answer 5

從屏幕的一個邊緣到下一個邊緣是整個視口長度。 最簡單的實現方法是使用vw （視口寬度）100vw是視口的全寬。 要拉伸絕對位置的div，左和右都應為0。使用border-bottom划一條線。

 div {} .A { min-width: 100%; position: relative; background: rgba(255, 0, 0, .4); height: 200px; } .B { min-width: 100vw; position: absolute; right: 0; left: 0; background: blue; height: 100px; border-bottom: 3px solid yellow; } 

 <div class='A'> <div class='B'></div> </div> 

Answer 6

@CooPer：如果相對位置的父級的寬度不為100％，則如果您為子元素設置100％的寬度，則絕對位置的子級將適合“父級”寬度。 這意味着子類僅占邊框的300px，如下例所示。

 .parent { position: relative; width: 300px; height: 200px; } .child { border: 1px solid red;//draw a line across screen position: absolute; width: 100%; } 

 <div class="parent"> <div class="child"></div> </div> 

因此，如果您希望孩子100％適應屏幕。 請嘗試以下。

 .parent { position: relative; width: 300px; height: 200px; } .child { border: 1px solid red;//draw a line across screen position: absolute; width: 100vw;//take up 100% viewport width } 

 <div class="parent"> <div class="child"></div> </div> 

大眾，自IE9開始支持vh 。 http://www.w3schools.com/cssref/css_units.asp