求助！左边的DIV设定了固定的宽度，右边的DIV如何自适应地填满剩下的屏幕宽度？
左边的DIV设定了固定的宽度，右边的DIV如何自适应地填满剩下的屏幕宽度？自适应是为了满足不同电脑的分辨率。我已经设定了DIV等高了。
<style type="text/css">
/*CSS部分*/
*{margin:0;padding:0;font-family:"微软雅黑";} /*去除默认间隔，设定全部字体为微软雅黑*/
body{background-image: url(images/wooden.jpg); background-repeat:no-repeat; background-size:cover; -moz-background-size: cover;} /*网页背景*/
#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>
慕神84474892回答
-
一只萌萌小番薯
无需js、无需浮动，直接用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;} -
梵蒂冈之花
<!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>
随时随地看视频慕课网APP
Bootstrap
CSS3