1. 程式人生 > >CSS實現一側寬度自適應,一側為固定寬度

CSS實現一側寬度自適應,一側為固定寬度

在百度前端技術學院遇到的問題,“頁面右側部分為固定寬度,左側保持與瀏覽器視窗變化同步自適應變化

不少網站都是這樣的兩列式佈局,螢幕比較寬,如果全屏只有一列,看起來會比較累;兩列式佈局,可以讓內容一列佔較多的空間,併為固定寬度;其他導航或推薦的內容為自適應列;

實現方式:固定寬度的一列用position:absolute;定位好;然後自適應的一側用margin進行定位;

<div id="left">
</div>
<div id="right">
</div>

#left{
	width: 400px;
	height: 1000px;
	position: absolute;
	top: 200px;
	left: 100px;
	background-color: yellow;
}
#right{
	height: 2000px;
	margin-left: 600px;
	background-color: red;
}