適度に余白を持ったボックスをウィンドウサイズいっぱいに広げたい。

css web

素直に考えてpadding:5px;width:100%とやってしまうとどうやってもはみ出す。


bodyに置くのは以下

    <div class="padding">
        <div class="border" style="border:2px solid red; ">
            <div class="contents" >
                contents<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            </div>
        </div>
    </div>

スタイル

        div{
            margin:0;
            padding:0;
        
        }
        div.padding{
            padding: 0.5em 1em 0.5em 1em;
            background-color:#C0C0CC;
        }
        div.border{
            backgroud-color:gray;
        }
        div.contents{
            backgroud-color:gray;
            background-color:#F0F0FF;
            width:100%;
        }
  • 実際に配置するdivをwidth:100%(余白、罫線を入れてめいいっぱい広げたい。)
  • 外側に罫線を配置。widthはauto
  • さらに外側に余白を配置。widthはauto