html - フローを中断せずにページの全幅の div

Question

ドキュメントの流れを壊さずに、幅が 100% の div (下の写真の黄色がかった部分) を記述する最良の方法は何ですか?

ここに画像の説明を入力

score 1 · Accepted Answer

div {position:absolute;}

または div {postion:fixed;} はドキュメントフローからそれを削除しますが、どちらを使用するかによっては、削除した後、必要な場所に配置するために左と上を指定する必要がある場合があります。

score 1 · Accepted Answer

<div id="container">
    <div class="big">
        //content
    </div>
    <div class="small">
       //content
    </div>
</div>

CSS:

.big
{
    background-color:#whatever;
}

.small
{
     width:75%;
     margin-left:auto;
     margin-right:auto;
}

score 1 · Accepted Answer

div は自動的にその親の幅全体を占有します (<body>この場合)。挿入すると

style="clear:both"

ストレッチしたい div に入ると、(ページの通常の流れに従って) 他の要素と並んでいないことが保証されるため、ボディの幅がストレッチされます。

3 に答える 3