非フルスクリーン幅の子要素の全画面幅親

Question

この問題は、that oneを基にしています。この場合、非フルサイズの親要素の子に全画面幅を適用するには、子要素：this Fiddleに示すよう

width: 100vw; 
margin-left: calc(-50vw + 50%); 

は、この解決策は、しかし、垂直スクロールバーの存在下では動作しない：（100vwアカウントにスクロールバーを取らない、従って子要素は、画面よりも広いなってしまいます注：スクロールバーなしで完全に動作します）。

この問題を解決する方法はありますか。そのため、子要素は完全に画面の幅になりますか？純粋なCSSでない場合は、JS？

注：bodyのoverflowのルールは、私の場合、画面の正確な幅を塗りつぶすために子供が必要なため、受け入れられません。あなたがここに溶液で出くわすだろう問題の

Answer 1

https://jsfiddle.net/k3nvkL35/4/

一つは、私はスクロールバーの幅が普遍的ではないと信じて、そしてあなたがそれに基づいて幅/マージンに影響を与えるために、いくつかの条件付きロジックを実装する必要があるかもしれないということです。

これは役に立つと思われるかもしれません。次の関数は、ドキュメントの高さとウィンドウの高さを比較して、ドキュメントに垂直スクロールバーがあるかどうかを確認します。スクロールバーの存在に基づいて、ウインドウに合わせて子の幅とマージンを変更します。

また、調整が必要な可能性がありますが、適切な基礎を提供する必要があります。

function adjustWidth() { 
 
    if ($(document).height() > $(window).height()) { 
 
     $(".child").css({ 
 
      "width": "calc(100vw - 18px)", 
 
      "margin-left": "calc(-50vw + 50% + 9px)" 
 
     }); 
 
    } else { 
 
    \t $(".child").css({ 
 
     \t "width": "", 
 
      "margin-left": "" 
 
     }) 
 
    } 
 
} 
 

 
$(window).resize(adjustWidth).trigger("resize");

.parent { 
 
    width: 500px; 
 
    height: 500px; 
 
    margin: 0 auto; 
 
    border: 3px solid green; 
 
} 
 

 
.child { 
 
    height: 100px; 
 
    background: red; 
 
    width: 100vw; 
 
    margin-left: calc(-50vw + 50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div class="child"> 
 
     content 
 
    </div> 
 
</div>

Answer 2

シンプル。親は決して配置されないので、子供は絶対に配置することができます。 calcまたはそれ以外の場合はどこでも動作します。ここで

.child { 
    height: 100px; 
    background: red; 
    position:absolute; 
    left:0; 
    right:0; 
} 

は作業フィドルです： https://jsfiddle.net/vgbr6qw2/

Answer 3

私はthis人によって供給されたthis解決策を見つけたが、私はもともとそれをやったか分かりません。私はそれを完全にテストしていないので、すべてのブラウザで動作するとは限りません。私はユニットがIE8でサポートされていないことを、誰かが気にするように知っています。ここで

body { 
 
    margin:0; 
 
} 
 
.wrapper { 
 
    width:100%; 
 
    max-width:400px; 
 
    margin:0 auto; 
 
    background:pink; 
 
    /* margin is for display purposes on stack overflows fullscreen snippet view */ 
 
    margin-top:80px; 
 
} 
 
.full-width { 
 
    width:100vw; 
 
    margin-left:-50vw; 
 
    left:50%; 
 
    background:red; 
 
    position:relative; 
 
    color:white; 
 
}

<div class="wrapper"> 
 
    <span>Hi. I'm a paragraph.</span> 
 
    <div class="full-width"> 
 
     <p>You aint no paragraph, sucka!</p> 
 
    </div> 
 
    <strong>Be quiet, you weak losers.</strong> 
 
</div>