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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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%

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

CSS-布局-图片在div中垂直居中

方法一：在img标签前加span

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style type="text/css">
        div{
            width: 600px;
            height: 600px;
            text-align: center;
            border: 1px solid red;
        }

        span{
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }

        img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>
        <span></span><img src="demo.jpg">
    </div>
</body>
</html>

 

以上是关于DIV+CSS布局问题 100%的页面上边固定高度下面div：height100%填充为左右结构左边固定宽度右边width:100%的主要内容，如果未能解决你的问题，请参考以下文章

div css布局网页如何实现网页自动适应屏幕高度和宽度

100% 带有页眉和页脚的 Css 布局

关于CSS布局：关于右侧DIV内容宽度100%，在ff和chrome浏览器中都正常，在IE中不正常，寻求解决方法

div 布局大框架宽度高度根据啥设置 不同的浏览器怎么设？

如何将固定高度的标题与灵活的页面布局相结合

布局：上下两个div高度固定，中间自适应