ねこきっくぱんちのメモ帳

webの勉強メモです。 HTML,CSS,JavaScript,PHP,Illustrator,Photoshopなど。

web019 リキッドデザイン(2カラム)で1カラムのみ横幅を固定(width:calc(XX% - YYpx))

リキッドデザイン(2カラム)で1カラムのみ横幅を固定(width:calc(XX% - YYpx))

width:calc(XX% - YYpx);

■利用シーン
リキッドデザインでサイドバーに広告を載せており幅を固定し、コンテンツだけリキッドとする場合。
※caniuseでほぼ全てのブラウザで利用可能

■コード

/* 左側のカラム 。幅:可変。*/
.wrap{
  overflow:hidden;
}
.content {
  float: left;
  width: calc(100% - 300px);
}

/* 右側のカラム。幅:固定 */
.sidebar{
  float:right;
  width:300px;
}

■参考
calc - CSS | MDN