左边的DIV设定了固定的宽度，右边的DIV如何自适应地填满剩下的屏幕宽度？
发布网友
发布时间：2022-05-18 22:23
共4个回答
热心网友
时间：2023-11-12 17:46
<style>
.row{
display: flex;
wrap: no-wrap;
}
.box1{
width: 100px;
height: 100px;
}
.box2{
width: 100%;
height: 200px;
background: black;
color: #fff;
}
</style>
</head>
<body>
<div class="row">
<div class="box1">
<h1>box1</h1>
</div>
<div class="box2">
<h1>box2</h1>
</div>
</div>
</body>
可以简单参考一下，上面用了flex布局。（我也是最近才学的）
至于用浮动来实现，一时半会我还真想不起要怎么实现了，再想想看......
热心网友
时间：2023-11-12 17:46
无需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;}
居然没悬赏分的说……
追问用你的绝对定位没办法固定sidebar不跟随页面滚动。暂时发现只有position:fixed才能固定。追答你想固定sidebar的话，将position:absolute改为position:fixed即可。
热心网友
时间：2023-11-12 17:47
<!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>
热心网友
时间：2023-11-12 17:47
或者伸缩布局，设置flex
