左邊的DIV設(shè)定了固定的寬度，右邊的DIV如何自適應(yīng)地填滿剩下的屏幕寬度？自適應(yīng)是為了滿足不同電腦的分辨率。我已經(jīng)設(shè)定了DIV等高了。<style type="text/css">/*CSS部分*/*{margin:0;padding:0;font-family:"微軟雅黑";} /*去除默認(rèn)間隔，設(shè)定全部字體為微軟雅黑*/body{background-image: url(images/wooden.jpg); background-repeat:no-repeat; background-size:cover; -moz-background-size: cover;} /*網(wǎng)頁(yè)背景*/#sidebar{width: 210px; height:auto; background-color: #ebb058;float:left; position: fixed; }#container{width: auto;height: auto;border: 2px solid #400080;margin-left: 210px; float: left; position: absolute;}</style><!--HTML部分--><body><!--div盒子模型 --><div id="sidebar"><!--左邊的DIV--></div><div id="container"><!--右邊的DIV--></div><!--javascript部分--><!--div等高-->document.getElementById("sidebar").style.height = document.getElementById("container").offsetHeight + "px";</script></body>
2 回答
一只萌萌小番薯
TA貢獻(xiàn)1795條經(jīng)驗(yàn) 獲得超7個(gè)贊
無(wú)需js、無(wú)需浮動(dòng)，直接用CSS即可搞定這樣的布局，主要代碼如下：
#sidebar, #container {min-height:400px; /* 視具體情況 */}#sidebar {width:210px; background-color:#ebb058; position:absolute; top:0; left:0;}#container {margin-left:210px; border:2px solid #400080;} |
梵蒂岡之花
TA貢獻(xiàn)1900條經(jīng)驗(yàn) 獲得超5個(gè)贊
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;}
body{
width: 100%;
height: 100%;
}
.l{
float: left;
width: 131px;
height: 45px;
background-color: #aaa;
}
.r{
height: 45px;
background-color: #0f0;
}
</style>
</head>
<body>
<div>左</div>
<div>右</div>
</body>
</html>
- 2 回答
- 0 關(guān)注
- 584 瀏覽
添加回答
舉報(bào)
0/150
提交
取消