当前位置：首页 → 问答吧 → DIV+CSS经典布局[宽度自适应][自动屏幕居中]的实现

DIV+CSS经典布局[宽度自适应][自动屏幕居中]的实现

时间：2007-01-15

来源：互联网

　　典型的上中下，并且中间分为三列的布局架构，可根据浏览器窗口的宽度自动调整适应800或1024的分辨率显示，也就是说当窗口不大于800时使用776的宽度，大于800时使用1024的宽度，自适应屏幕居中显示。

　　在IE6.0和FF1.5中可正常浏览

　　将code中的HTML代码存为一个单独的html文件，可浏览实现效果和详细的用法分析。

<div><iframe src="http://www.heartonline.com.cn/blog/article.asp?id=84" width="1000" height="600"></iframe></div>
提示：您可以先修改部分代码再运行

[ 本帖最后由 moyixiu 于 2007-1-15 22:22 编辑 ]

作者: moyixiu 发布时间: 2007-01-15

帮你贴出来了
个人认为布局用css通用属性才有普遍意义么。好多expression。在具体实现的时候很容易出现问题的了，呵呵，愚见愚见。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>test</title> </head> <style type="text/css">  --> </style> </head> <body> <div id="wrapper"> <div id="header">Header</div> <div id="outer"> <div id="clearheader"></div> <div class="outerwrap"> <p align=left><strong>分析：</strong></p> <p align=left>　最外层的wrapper把所有内容都嵌套在里边，整体相对定位。max min已经很好的控制了最窄最宽值，但对IE没有作用。如果没有其他布局的穿插，这一层其实写在body内就可以，少一层嵌套。</p> <p class=code align=left>#wrapper{ width:auto; border:1px solid #000; min-width:776px; max-width:1000px; text-align:left; margin-left:auto; margin-right:auto; position:relative;}</p> <p></p> <p><font color=#ff0000>wrapper 下级的 outer header footer</font></p> <p>其中header绝对定位，footer 相对定位；outer分别对左右有130px的外边距，这是兼容非IE的关键。</p> <p class=code>#outer{ margin-left:130px; margin-right:130px; background:silver; border-left:1px solid #000; border-right:1px solid #000; color: #000;}<br /> #header{ position:absolute; top:0; left:0; width:100%; height:70px; line-height:70px; border-bottom:1px solid #000; overflow:hidden; background:#0ff; text-align:center; font-size:xx-large}<br /> #footer { width:100%; clear:both; line-height:50px; border-top:1px solid #000; background:#ffc; color:#000; text-align:center; position:relative;}</p> <p><font color=#ff0000>outer 下级的 clearheader outerwrap right clearer</font></p> <p>clearheader 用做填补header的空白，clearer 是一个常用的填充hack用法。<br /> outerwrap 宽为什么是99%，而不是100%？<br /> 因为他的上层outer有边框，100%宽再加2个边框象素就会撑大，FF有明显效果。<br /> right 的处理很经典，IE下解析为定位，FF下则为浮动。负边距的处理也刚好使用上outer留出的空白。</p> <p class=code>#clearheader{ height:72px;}<br /> .outerwrap { float:left; width:99%;}<br /> #right {<br /> position:relative;<br /> width:130px; float:right; left:1px;<br /> margin-right:-129px;<br /> }<br /> * html #right { margin-right:-130px; margin-left:-3px}<br /> .clearer{ height:1px; overflow:hidden; margin-top:-1px; clear:both;}</p> <p>outerwrap 内的 centrecontent left clearer 思路与上面类似。</p> <p><font color=#ff0000>指定IE5.0及版本以上浏览器有效</font></p> <p>使用expression方法实现对IE5.0及以上版本的宽度条件控制，实现自动调整宽度并居中。宽度我都固定了数值，因为如果在这里使用auto，会在调整窗口大小过程中发生div内容无法显示的问题。</p> <p class=code>body {<br /> width:expression( documentElement.clientWidth <= 800 ? (documentElement.clientWidth == 0 ? (body.clientWidth <= 800 ? "776" : "1000") : "776px") : "1000" );<br /> }<br /> #wrapper {<br /> width:expression( documentElement.clientWidth <= 800 ? (documentElement.clientWidth == 0 ? (body.clientWidth <= 800 ? "776" : "1000") : "776px") : "1000" );<br /> }</p> <p class=code>这个例子融合了很多DIV+CSS的经典用法和定义，同时很传统和实用。</p> </div> <div id="right"></div> <div class="clearer"></div> </div> <div id="footer">Footer</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: hero4u 发布时间: 2007-01-16

单纯水平居中的话。很简单就可以实现。
这是我在网上看到的。

作者: CuFish 发布时间: 2007-01-16

呵~~谢谢 hero4u 我放到可执行html代码里不知道为什么页面下面就显示不出来了，所以用了这个笨方法。你说得很有道理，可能引入变量会更好一些。

to CuFish：简单的层居中当然很简单，但是嵌套后的分栏布局是比较复杂的，特别是纯div的三分栏以上的页面布局，你在做的时候就知道了，呵呵

作者: moyixiu 发布时间: 2007-01-16

我想实现如果内容不够长，FOOTER固定到最下沿，如果内容够长，那就随着内容后面，不知道应该怎么做，要用那个expression?

作者: timefly 发布时间: 2007-01-17

这方法和精通css里讲的一样.
以后是个很实用的方法,
不过建议楼主以后做例子不要把背景色的冲突那么大,晃的我眼晕

作者: 261509559 发布时间: 2007-01-17

网站早有调整，教程地址已更新为：http://www.heartonline.com.cn/blog/article.asp?id=463，不好意思，因为看到还有人从这里链过来，原帖已经不许编辑，特意在这里说明下。

作者: moyixiu 发布时间: 2010-09-07