DIV+CSS浮动布局完美解决方案

本文首发在www.liuhaifeng.com ，转载请注明出处：http://www.liuhaifeng.com/2009/10/div-css%e6%b5%ae%e5%8a%a8%e5%b8%83%e5%b1%80%e5%ae%8c%e7%be%8e%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88

 

DIV+CSS网页布局常用到浮动方案，但浮动并不像表格那样好用，很多时候会出问题。同时设计不够良好的浮动布局，在不同的浏览器下会有不同的表 现，可能设计时照着常用的浏览器做好了，拿到其它浏览器里一看又乱掉了。浏器自身的问题往往是这些麻烦的罪魁祸首。Firefox对标准的支持较好 些，IE7、IE8次之，IE6目前用户群较多，但也比较糟糕，经常莫名其妙地多出一些空隙等等。拿浮动布局来说，你算好的宽度在Firefox以及 IE7、IE8下可能是正常的，拿到IE6里就会发现不该换行的时候它却换行了。

然而，不管HTML页面设计人员怎么骂微软，网页还是要做的。我这里就以自己的经验给大家介绍一些常用的解决方案。

1、如果是两栏并列，要在中间显示分界线或图片，可以使用repeat-y的背景图片来实现，此样式写在这两栏的父级元素中，可以保证分界线与最高的栏等高。

示例：

<div id=”wrap” style=”background:url(images/vline.gif) repeat-y left top;”>
<div id=”col1″ style=”float:left;width:100px;”>第一列</div>
<div id=”col2″ style=”float:left;width:100px;”>第二列</div>
</div>

假设vline.gif是宽100px高1px，左边99像素为白色，最右边1像素是黑色，则此背景图片实现的效果就是在两列间拉出一条黑色竖线。

不过要说明一下，这种方法如果父元素宽度设计200px，理论上是正确的，但实际上在IE6里会换行，因为IE6不遵从W3C标准。在IE6里你可以把父元素宽度设得比200px大一些，但这样格式会不够完美。你可以用下面的margin法解决这个换行问题。

2、如果有一列想用自适应宽度，而不是固定宽度，可以巧用margin属性。比如左边固定100px，右边自适应，则可以让父元素“margin- left:100px”，第一列再“margin-left:-100px”，第二列就可以用“width:100%”来实现自适应宽度了。如果不这样巧 用margin，第二列没法设百分比，因为浏览器客户区宽度*100%+100px是超出浏览器客户区总宽度的，浏览器会出现横向滚动条；又因为浏览器客 户区总宽度不确定（确定的话就不用什么自适应了），你也没法用类似80%这样的百分比使其正好撇下100px给第一列。

另外你可能想让这两列的父级有一个最小宽度以避免两列换行，这个可以用min-width属性来实现。

示例代码：

<div id=”wrap” style=”background:url(images/vline.gif) repeat-y left top;margin-left:100px;min-width:768px;”>
<div id=”col1″ style=”float:left;width:100px;margin-left:-100px;”>第一列</div>
<div id=”col2″ style=”float:left;width:100%;”>第二列</div>
</div>

3、自适应高度的该如何设计呢？很多人为这个问题头痛过，抱怨height:100%不管用。其实，让它管用很简单，只是别忘了给html也加上 height:100%的属性。没错，就是html，你可以写成这样：html,body{height:100%}。但这样还有个问题，没解决。如果你 想让一行字始中处于最下面，该怎么做呢？答案还是margin。

你可以把主体部分放在一个DIV中，将其最小高度设为100%，然后在后面放页脚的DIV，假如它的高度为40px，则“margin- top:-40px”，这样可能会使主体部分下边的内容被遮住，解决办法是在主体部分最下面的元素上加“padding-bottom:40px”属性即 可。理论上讲加“margin-bottom:40px”也可以，但观查发现在IE里会出现垂直滚动条。

示例代码：

<div id=”main” style=”height:auto;min-height:100%;”>
<div>峰之部落 DIV+CSS浮动布局完美解决方案</div>
<div style=”padding-bottom:40px;”>something from http://www.liuhaifeng.com/</div>
</div>
<div id=”footer” style=”margin-top:-40px;”>页脚始终在底部</div>

注意别忘了样式表中要加：html,body{height:100%;} 峰之部落 原创文章，转载请注明出处。

这三招应用技巧，基本能解决DIV+CSS浮动布局的常见问题，且能较好的兼容不同的浏览器。