左边的DIV设定了固定的宽度，右边的DIV如何自适应地填满剩下的屏幕宽度？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了左边的DIV设定了固定的宽度，右边的DIV如何自适应地填满剩下的屏幕宽度？相关的知识，希望对你有一定的参考价值。
左边的DIV设定了固定的宽度，右边的DIV如何自适应地填满剩下的屏幕宽度？自适应是为了满足不同电脑的分辨率。我已经设定了DIV等高了。
<style type="text/css">
/*CSS部分*/
*margin:0;padding:0;font-family:"微软雅黑"; /*去除默认间隔，设定全部字体为微软雅黑*/
bodybackground-image: url(images/wooden.jpg); background-repeat:no-repeat; background-size:cover; -moz-background-size: cover; /*网页背景*/
#sidebarwidth: 210px; height:auto; background-color: #ebb058;float:left; position: fixed;
#containerwidth: 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>
<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布局。（我也是最近才学的）
至于用浮动来实现，一时半会我还真想不起要怎么实现了，再想想看......
参考技术A无需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即可。
参考技术B<!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>
参考技术C 右边盒子设置宽度百分之百，margin-left是左边盒子的宽度就可以了或者伸缩布局，设置flex
右边固定，左边自适应
右边固定，左边自适应
原理：两节点并排，左节点浮动，右节点向最左边靠齐，此时浮动元素会遮住左节点，因为块状元素默认长度100%；
html
<div id="wrap"> <div id="sidebar" style="height:340px;">固定宽度区</div> <div id="content" style="height:340px;">自适应区</div> </div> <div id="footer">后面的一个DIV，以确保前面的定位不会导致后面的变形</div>
css
#wrap { overflow: hidden; *zoom: 1; } #content ,#sidebar { background-color: #eee; } #sidebar { float: right; width: 300px; } #content { margin-right: 310px; } #footer {background-color: #f00;color:#fff; margin-top: 1em}
以上是关于左边的DIV设定了固定的宽度，右边的DIV如何自适应地填满剩下的屏幕宽度？的主要内容，如果未能解决你的问题，请参考以下文章
两个div并排，左边div固定宽度，右边宽度自适应”，至少列出4种。
css能不能实现左边div固定宽度，右边div自适应撑满剩下的宽度
css能不能实现左边div固定宽度，右边div自适应撑满剩下的宽度