左右に余白を取りつつ要素をレスポンシブ対応する
2014年3月31日CSSテクニック
ウィンドウを縮めていった時、スクロールバーを出さずに要素をレスポンシブ対応させる場合は、box-sizingとpaddingを使います。
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;
}
- Tweet
