繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS实例：CSS实现的等高网页布局
- CSS样式表
- 验证并修复css错误内容的相关工具
- 分享3个比较实用的CSS页面框架布局
- CSS幻灯片教程:制作高效可维护组件化的CSS代码
- 网页制作基础知识:html特殊符号
- CSS教程:按整洁易懂的结构组织CSS样式
- 查看和编辑CSS中用到的颜色:CSS Prism
- 帮助你学习CSS的在线CSS工具网站
- CSS网页设计参考:把HTML标记分类
- CSS进阶:几个Reset CSS的八卦问题
- WEB设计技巧:网页虚线制作方法剖析
- WEBJX收集CSS格式化和造型网页高级教程
- CSS3教程:在CSS中使用的颜色
- 学习WEB标准心得:网页重构的思路
- 轻易创建css导航工具:CSS Tab Designer2
- 总结学习web标准的十个重要理由
- CSS实例教程:CSS制作星级评价的功能
- CSS实例教程:纯CSS实现圆角框
- 多个css、js文件自动合并、压缩
- 网页设计教程:CSS文字排版技巧大全
- Photoshop制作CSS网页制作的背景图
CSS样式表 中的 CSS实例：CSS实现的等高网页布局
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-09 浏览: 32 ::
收藏到网摘: n/a
为了让网页更美观、协调，有的时候需要用到左右等到布局，传统的等高布局是用 javascript 实现的，现在来看看 silence 发明的真正的 CSS 实现的等高布局，其方法主要是采用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的。
下面来看看实际的例子（三列等高），以下面的 XHTML 代码为例：
<div id="wrap">
<div id="left">
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div id="center">
<p>center</p>
……（20个或更多个）
<p>center</p>
</div>
<div id="right">
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
<div id="left">
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div id="center">
<p>center</p>
……（20个或更多个）
<p>center</p>
</div>
<div id="right">
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
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;
}
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;
}
从效果中可以看到，左右两列虽然内容少，但高度和内容最多的中间列等高。其核心代码（拿本例来说）是：
#wrap{
overflow:hidden;
}
#left,#center,#right{
margin-bottom:-10000px;
padding-bottom:10000px;
}
overflow:hidden;
}
#left,#center,#right{
margin-bottom:-10000px;
padding-bottom:10000px;
}
其中的 10000px 可以修改为其他值，但不能小于最高列的高度。
经测试，此方法兼容 IE6/IE7/IE8 beta 2/FF/Opera/Chrome 。
方法很简单吧。从这里可以看出：看似简单的 CSS,其实并不简单。
======= 华丽的分割线（2009/02/18） ==================================
前两天做网页的时候运用这样方法发现一个问题：如果子列有边框 border 属性的话，下边框不会将不显示。因为他们下面还有很长一部分，都被隐藏了，看图理解：
半透明部分都被隐藏了，所以看不到下边框。
评论 (0) All
