サウウェブ

映画、海外ドラマたまにスケボー、車、B'z、BUMPのブログ

WEB

片方が固定、片方が可変のレスポンシブレイアウトのCSS設定方法

2016/10/06  | 467 views

pc_a

レスポンシブデザインで左側の要素の横幅だ固定、右側がブラウザの横幅によって可変するときのCSSの設定方法です。

下記は、左側の要素が300px、右側の要素が、可変で作成するときのcssの指定です。

 

スポンサーリンク

html

<div class="wrapper">
	<div class="side">
		<!-- 固定 -->
	</div>
	<div class="main">
		<!-- 可変 -->
	</div>

</div>

 

css

.wrapper {
	overflow: hidden;
}
.main {
	float: right;
	width: 100%;
	margin-right: -300px;
	padding-right: 300px;
	box-sizing: border-box;
}
.side {
	float: left;
	width: 300px;
}

この記事が気に入ったら
いいね ! しよう

-WEB