纯css三列等高且高度自适应原理-第九区

纯css三列等高且高度自适应原理

投稿人：Even

前些日子在jq群上看到小魔兄发的一个纯css三列等高且高度自适应的代码.很是不解.而且前几天自己也没什么时间去研究.今天就仔细地看看了.(脑子清醒了.看东西也简单了...)
原来是这么个道理.利用padding跟margin的互补来解决.下面我就来解释一下这个原理.
先贴一下源码:

<!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=utf-8" />
<title>CSS等高布局</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
.wrap {
overflow:hidden;
width:1000px;
margin:0 auto;
}
.left, .center, .right {
margin-bottom:-10000px;
padding-bottom:10000px;
}
.left {
float:left;
width:250px;
background:#00FFFF;
}
.center {
float:left;
width:500px;
background:#FF0000;
}
.right {
float:right;
width:250px;
background:#00FF00;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">
<p>左边内容</p>
<p>左边内容</p>
</div>
<div class="center">
<p>中间内容</p>
<p>中间内容</p>
<p>中间内容</p>
<p>中间内容</p>
<p>中间内容</p>
<p>中间内容</p>
</div>
<div class="right">
<p>右边内容</p>
</div>
</div>
</body>
</html>

首先.我们要了解这里的padding的效果.这里的假设简略了一些样式设置:
一个height为10px的div,padding-bottom为100的话.它的总高度为110吧.而且背景也为110px.那他对他的父元素的高度其实也就是110px.是吧?
好.那这时.我再给一个margin-bottom:-100px.你们认为会怎样呢?
实际显示高度仍然为110px的div对于父元素来说却只有10px那么高.能理解么?
也就是说.就box-model上讲.padding是加了100px的内边距.这个padding内是不可编辑的.但是可以看到的.而从外边距margin确实负数的,这时为了反过来去掉因为padding而增加的总高度.也就是说.这个div对外的实际高度为10px,而实际显示的内容(包括背景)为110px.

理解了上面的原理.再回头看这代码..好好地整理一下思绪吧.
哦.发现了没?实际上.你最高的那个div对外的实际高度减去其他任何div对外的实际高度之后,那个差值只要是小于padding与margin那个值.这三列div看起来就是等高的..
但是.实质上.并不是等高的.只是背景上看起来等高而已.其实就是因为父元素根据最高的那个div截断了所有的div的因padding-bottom多出的高度.
如果你去设置border,你就会发现.其实下面的部分.全部都被隐藏了...这时.你们应该知道是怎么回事了吧.

别告诉我还不明白啊...
有不明白的,后期我再看看有没有时间搞个图片来说明

好累啊...完全用文字表达...对偶来说,太有挑战了...{:3_61:}

第九区：jquery基地,职业网站设计者大本营

搜索

赞助

纯css三列等高且高度自适应原理