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％

public void addSleepProperties(SleepProperties sleepProperties) {
    this.sleepProperties = sleepProperties;
    if (!(sleepProperties == null)) {
        this.sleepProperties.setSleepMeasure(this);
    }
}

或添加左：20px;和calc函数width：calc（100％ - 40px）

.box2 {
    position: absolute;
    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制作一行。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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以来，支持

vw，vh 。 http://www.w3schools.com/cssref/css_units.asp

内部绝对定位相对宽度为100％

6 个答案: