絶対要素の幅を100％に設定し、親要素ではなく親要素を相対要素に合わせるにはどうしますか？ は、ここに私のコードです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%;
}
はい、あなたはウィンドウ幅に等しい100vwを使用しても絶対要素の位置にcalcを使用することができます。したがって、絶対要素をウィンドウの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>width = 500pxでないとどうなりますか？ – Cooper
@CooPer次に、このようなものを使用できます。https://jsfiddle.net/Lg0wyt9u/1052/ –
：20ピクセル;右：20ピクセル。幅を削除：100％
.box2 {
position: absolute;
padding: 50px 0;
color: #000;
background: #fff;
border: solid thin #06F;
}
または左側に追加：計算関数の幅：calc（100％-40px）
.box2 {
position: absolute;
width: calc(100% - 40px);
padding: 50px 0;
color: #000;
background: #fff;
border: solid thin #06F;
}
私の質問を編集しました – Cooper
行の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%;
}
次のエッジに、画面の一端から
body{
margin:0;
}
.relative{
position:relative;
}
.absolute{
width:100%;
height:1px;
background:red;
position:absolute;
}
、これを試してみてくださいフルレンでありますビューポートの達成する最も簡単な方法は、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>@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>VW、VHはIE9以降サポートされていました。 http://www.w3schools.com/cssref/css_units.asp
同様にあなたのhtmlコードを共有してください。 – RasmusGlenvig
@RasmusGlenvig私はそれを追加する – Cooper
「相対的な要素の内側にスクリーンをフィットさせる」とはどういう意味ですか？ – Roysh