css能不能实现左边div固定宽度，右边div自适应撑满剩下的宽度

Posted 2023-04-30

直接给你写个示例

<div style=" float:left; width:200px; height:400px; background:red; color:white;">左边宽度固定</div>
 <div style=" height:400px; background:blue; color:white; margin-left:200px;">右边宽度自动</div>

参考技术A <div style="width:100%;height:auto;overflow:hidden">
<div style="float:left;width:200px;height:auto;min-height:300px;background:#f00">左边固定宽度</div>

<div style="margin-left:200px;width:100%">右边撑满剩余宽度</div>

</div> 参考技术B <div style="padding-left:200px;position:relative">
    <div style="width:200px;height:500px;position:absolute;left:0;">left</div>
    <div style="width:100%;height:500px;">right</div>
</div>

参考技术C 可以的，左边DIV用固定宽度，右边DIV用百分比来定义宽度！

DIV+CSS布局问题 100%的页面上边固定高度下面div：height100%填充为左右结构左边固定宽度右边width:100%

<div id="header">
<table width="100%" border="0">
<tr>
<td rowspan="2" align="center" width="85"><img src="jiaoben2613/images/logo.png" width="85" height="85" /></td>
<td>西南民族大学继续教育学院综合管理系统</td>
<td>欢迎系统管理员登录</td>
</tr>
<tr>

<td colspan="2"><div><a href="#">新闻中心</a><a href="#">新闻中心</a><a href="#">新闻中心</a><a href="#">新闻中心</a><a href="#">新闻中心</a><a href="#">新闻中心</a></div></td>

</tr>
</table>
</div>
<div id="middle">
<div id="left">gggggggggggggggggggggggggg
</div>
<div id="right">

</div>
</div>
<style>
* padding:0; margin:0
html,body padding:0 !important; padding:105px 0 0 0;
width:100%; height:100%; overflow: auto; min-height:600px; min-width:800px;
#header height:100px; position:absolute; top:0; width:100%; padding-bottom:5px; background: #F36;
#middle position:absolute !important; top:105px !important; height:auto !important; position:relative; top:-105px; height:100%; overflow:auto; background:#099; width:100%; bottom:0;
#left position:absolute !important; top:0 !important; height:auto !important; position:relative; top:0; height:100%; overflow:auto; width:220px; bottom:0; background:#9C3; float:left;
#right position:absolute !important; left:0 !important; height:auto !important; position:relative; top:0; left:0; height:100%; bottom:0; background: #63F; float:right;width:100%; margin-left:220px;_margin-left:220px;
</style>
现在是右边的达不到效果，还有就是让整个页面在浏览器缩小到600宽 800高的时候自动出现滚动条查看信息,请各位高手指点哈，将不胜感激啊 ！！！！！！
div+css布局 实现：页面分上、下（左、右）。
整个页面全屏显示，要有最小宽度和最小高度。上部分高度固定，下左宽度固定。

<style>
* padding:0; margin:0
body position:relative; width:100%; height:100%; min-height:600px; min-width:800px; overflow:hidden;
#header height:100px; position:absolute; top:0; width:100%; padding-bottom:5px; background: #F36;
#middle height:100%;width:100%; bottom:0; background:#eee;
#left position:absolute; left:0; top:105px; height:100%; width:220px; background:#9C3; overflow-y:auto; overflow-x:hidden;
#right margin-left:220px; padding-top:105px; background: #63F; overflow-y:auto; overflow-x:over; height:100%;
</style>
<div id="header">
<table width="100%" border="0">
<tr>
<td rowspan="2" align="center" width="85"><img src="jiaoben2613/images/logo.png" width="85" height="85" /></td>
<td>西南民族大学继续教育学院综合管理系统</td>
<td>欢迎系统管理员登录</td>
</tr>
<tr>
<td colspan="2">
<div><a href="#">新闻中心</a><a href="#">新闻中心</a><a href="#">新闻中心</a><a href="#">新闻中心</a><a href="#">新闻中心</a><a href="#">新闻中心</a></div>
</td>
</tr>
</table>
</div>
<div id="middle">
<div id="left"><p>左边</p><div style=" width:100px; height:1000px; border:1px #000 solid;"></div></div>
<div id="right"><p>右边</p><div style=" width:100px; height:1000px; border:1px #000 solid;"></div></div>
</div>
试试这样可以不？或者 你就用表格好了！ 参考技术A 你要自适应不是给100%吧？？应该是left是float:left; width:220px;
right:float:left; margin-left:220px;
更多自适应的可以参考：
http://www.cnblogs.com/dearxinli/p/3799094.html本回答被提问者采纳 参考技术B DIV+CSS布局问题 100%的页面上边固定高度下面div：height100%填充为左右结构左边固定宽度右边width:100%

你能把这个用标点符号 分开，让我看的清楚点吗？