
左右に余白を取りつつ要素をレスポンシブ対応する
2014年3月31日CSSテクニック
ウィンドウを縮めていった時、スクロールバーを出さずに要素をレスポンシブ対応させる場合は、box-sizingとpaddingを使います。
Advertisement
HTML
<div id="contents"> <div></div> </div>
CSS
#contents { width: 100%; max-width: 1024px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } #contents div { background-color: #52d3ff; width: 100%; height: 300px; }