
サイドカラムの幅を固定したままウィンドウ幅に応じてメインカラムを可変させる
2014年7月23日CSSテクニック
レスポンシブ・ウェブデザインをする時、ウィンドウ幅に応じてサイドカラムの幅は固定したまま、メインカラムの幅だけ可変させます。
HTML
<div id="contents"> <div id="main">main</div> <div id="side">side</div> </div>
CSS
#contents { max-width: 1280px; min-width: 640px; height: 360px; box-sizing: border-box; margin: 0 auto; padding-right: 320px; } #contents:after { display : table; clear : both; content : ''; } #main { width: 100%; background-color: #ffffff; float: left; height: 100%; } #side { width: 320px; height: 100%; margin-right: -320px; float: right; background-color: #52d3ff; color: #ffffff; }