多种方法实现div两列等高（收集整理）

HTML骨架

<div id="header">头部</div>

<div id ="container">

     <div class="mainbox">主内容区域</div>

     <div class="sidebox">侧边栏</div>

</div>

<div id="footer">页脚</div>

1.背景模拟（使用背景图片实现等高）：

背景模拟主要依靠一张图片，然后将其平铺，使页面在视觉上，产生等高效果，如图

背景模拟实现很简单，直接利用了background-repeat属性,使背景图片以Y轴方向重复。

图片：

css： background-repeat:repeat-y;

关于背景图片，这个需更具你的实际项目需求，值得注意的是背景图片切图时必须以两列的形式，否这达不到等高效果。

*{ margin:; padding:;}

#header,#footer{ width:960px;/*设置头部，页脚宽度*/ height:30px;/*设置头部，页脚高度*/ background-color:#6CF;/*设置头部，页脚背景颜色*/}

#container{ width:960px;/*设置元素宽度*/ background:url(images/bg.png) repeat-y 0 0; /*将背景图片以y轴重复*/}

.mainbox{ float:left;/*元素左浮动*/ width:650px;/*元素宽度*/}

.sidebox{ float:right;/*元素右浮动*/ width:280px;/*元素宽度*/}.mainbox,.sidebox{ padding:0 5px; color:#FF0000;}/*设置mainbox,sidebox共同属性*/

#container:after{ display:block; visibility:hidden; font-size:; line-height:; clear:both; content:"";}/*清楚浮动*/

2.负边距实现

提到负边距，在学习盒子模型时，相信大家都学过，也了解过。在这我就不阐述了, 负边距实现等高主要利用了padding-bottom 和 margin-bottom两个属性，父元素container层内添加了overflow属性,其中margin为负值，padding为正值。如图

*{ margin:; padding:;}

#header,#footer{ width:960px; height:30px; background-color:#E8E8E8;}

#container{ width:960px; overflow:hidden;/重点！将父级元素多余部分切除掉/ margin:10px 0;}

.mainbox{ float:left; width:650px; background-color:#333333;}

.sidebox{ float:right; width:280px; background-color:#AAAAAA;}

.mainbox,.sidebox{ padding:0 5px; color:#FF0000; margin-bottom:-9999px;/*将容器背景色拉伸*/ padding-bottom:9999px;/*将容器背景色拉伸*/}

#container:after{ display:block; visibility:hidden; font-size:; line-height:; clear:both; content:"";}

3.使用border实现等高

使用边框(border)实现等高，其实也就是” 使用负边距实现等高”的一个改版，也是一个投机取巧的方法。

*{ margin:; padding:;}

#header,#footer{ width:970px; height:30px; background-color:#9CF;}#container{ position:relative;/*将子元素的定位到具体的参照对象*/ width:970px; margin:10px 0;}

.mainbox{ width:650px; background-color:#FC9; border-right:320px solid #F63;/*设置左边框宽度为320px像素，同等于sidebox的宽度*/}

.sidebox{ width:320px; position:absolute; top:; right:;/*使元素靠右*/}

4。使用JavaScript实现等高

使用JavaScript实现等高很简单，使用getElementById方法获取两个元素的的高度值，判断两个元素的高度，最后负值。

<script type="text/javascript">
   mh = document.getElementById('mainbox');sh = document.getElementById('sidebox');
  if(mh.clientHeight < sh.clientHeight){
　　　　　　 mh.style.height = sh .clientHeight + "px";
　　　　}else{
　　　　　　 sh.style.height = mh.clientHeight + "px";
  }

</script>

总结：凡事有利必有害，使用CSS实现等高也是如此，不过，最后还是推荐使用JavaScript方式实现等高，毕竟CSS样式主要作用是修饰页面

5.JQuery 实现两列等高并自适应高度

原理就是取得左右两边的高度，然后判断这个值，把大的值赋给小的就行了。代码：

$(document).ready(function() {

    var _leftheight = $(".left").height();

    var _rightheight = $(".right").height();

    if (_leftheight > _rightheight) {

        $(".right").height(_leftheight);

    } else {

        $(".left").height(_rightheight);

    }

});

6. 扩展：CSS 多列多模块等高布局

原理是事先通过正内边距来使其拥有足够高的布局控件，然后通过负外边距来使得其的位置不变。通过给父元素溢出隐藏，我们可以隐藏掉事先占据的足够高的空间。由两列实际的内容高度来决定整个父元素的高度，从而实现了等高。
习
惯思维上，我们都是多列等高，然后把这几列都浮动。现在我们变换一下思路，直接使用不浮动的一列的时候，情况会怎样，我们发现，当一列不浮动搭配正
内边距加负外边距，父元素溢出隐藏，它的高度跟还是由内在元素来决定，但是通过web developer
toolbar我们可以看到它实际上已经占据了足够的高度空间同样的道理，定位也遵循这个规则。我们可以把两侧边框使用绝对定位来固定到两侧，因为绝对定位是不占布局空间的，那么我们需要一个文档流来对父元素进行占位。基本上父元素有多高，就显示绝对定位的元素多少内容，实际上这也就实现了一个等高。
知道了这个表现原理，那么上文的布局也就不难了，只需要把每列最后一个模块再进行正内边距加负外边距来进行空间占位就可以实现了！至于下边框，实际上另外一个容器从底下进行拼装实现的~！

<!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>无标题 1</title>

        <style type="text/css">

            * {margin: 0; padding: 0;}

            body {margin:30px;font:14px/1.6em Verdana,Lucida, Arial, Helvetica, 宋体,sans-serif; }

            .main {overflow: hidden; width:800px; margin: 0 auto;}

            .left {float: left; width: 250px; overflow: hidden; }

            .center {float:left; margin-left:5px; width:295px; }

            .right {float: right;width: 245px; overflow: hidden;}

            .bor_top { height:1px; background:#FB9D51;overflow:hidden; }

            .equal {padding-bottom: 1000px; margin-bottom: -1000px;}

            .box {background: #F5E2AF; border: 1px #FB9D51 solid; padding-left:10px;padding-right:10px;}

            .mt5 {margin-top: 5px;}

        </style>

    </head>

    <body>

        <div class="main">

            <div class="left equal">

                <div class="box"><p>你相信这个左右等高的布局是纯的CSS写的吗？</p></div>

                <div class="box mt5"><p>测试一下</p></div>

                <div class="box mt5"><p>测试一下</p></div>

                <div class="equal mt5 box">

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                </div>

            </div>

            <div class="center equal">

                <div class="box"><p>不由得你不信，这个的确是纯CSS写的</p></div>

                <div class="box mt5"><p>测试一下</p></div>

                <div class="box mt5"><p>测试一下</p></div>

                <div class="equal mt5 box">

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                   <p>测试一下</p>

                </div>

            </div>

            <div class="equal right">

                <div class="box">

                    <p>测试一下</p>

                    <p>测试一下</p>

                </div>

                <div class="box mt5">

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                </div>

                <div class="box mt5">

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                </div>

                <div class="equal mt5 box">

                    <p>测试一下</p>

                    <p>测试一下</p>

                    <p>测试一下</p>

                </div>

            </div>

        </div>

        <div class="main">

            <div class="left bor_top"></div>

            <div class="center bor_top"></div>

            <div class="right bor_top"></div>

        </div>

    </body>

</html>

参考：

http://hi.baidu.com/mengqing723/item/726c87a43d6410d95bf19131
JQuery 实现两列等高并自适应高度
http://hi.baidu.com/setcookie/item/2d990eb512f7f074254b0933

多种方法实现div两列等高（收集整理）的更多相关文章

css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路首先把这个问题分步解决,需要攻克以 ...
wpf ListBox,item两列不等高。
业务有这样的需求,类似瀑布流.内容两列不等高展示. 只需要继承panel,重写MeasureOverride和ArrangeOverride方法就行了. 很简单,内容都在代码里. using Syst ...
JQuery 实现两列等高并自适应高度
想要使用 JQuery 实现两列等高并自适应高度,其实也很简单,原理就是取得左右两边的高度,然后判断这个值,把大的值赋给小的就行了.看代码: $(document).ready(function() ...
div两栏等高布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
纯css实现div三列等高布局的最简单方法简化版/也可以多列
使用正padding和负margin对冲实现多列布局方法这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...
两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高
代码: 效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/ ...
css两列等高布局
布局方案等高布局有几种不同的方法,但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法.首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个 ...
纯css实现两列等高
<!doctype html> <html> <head> <meta /> <title>Title</title> < ...
div 两列布局，左侧固定宽度px，右侧自适应宽度，满屏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

随机推荐

ES6 class setTimeout promise async/await 测试Demo
class Person { async getVersion () { return new Promise((resolve, reject) => { setTimeout(functio ...
Response.ContentType 详细列表-请求的内容类型详细记录
Response.ContentType 详细列表-请求的内容类型详细记录作者:王春天一.应用实例: Response.Clear(); Response.ContentType = "t ...
Java：HttpClient篇，Cookie概述，及其在HttpClient4.2中的应用
1. Cookie 概述 Cookie是什么? Cookie 是一小段文本信息,伴随着用户请求和页面在 Web 服务器和浏览器之间传递.Cookie 包含每次用户访问站点时 Web 应用程序都可以读取 ...
jquery图片放大功能简单实现
图片放大在某些例如商品细节放大图比较常见,本文写了一个图片放大的示例适合日常应付,有需求的朋友可以参考下 <div class="jqzoom"> <img sr ...
cpu降频问题
cpu做为能耗很高的硬件,最近几年厂商在节能方面做了很多处理,在服务器运行时,基于负载情况可调节成节能模式,节省电能,副作用是cpu的频率会降低,导致应用程序性能降低. 有第三方统计,服务器规模达到万 ...
B+树在数据库中的应用
B+树在数据库中的应用 flyfish 2015-7-6 B+树在数据库中的应用重要是实现索引应用方式一 ID为表的主键,利用主键建立一棵B+树叶子结点存储记录的地址应用方式二 ID为表的主键. ...
tortoisegit 7步学会git分支
tortoisegit 7步学会git分支做自己的产品,分支还是很重要的.例如,我发布了一个app,但是有bug,又想做新功能,怎么办呢?如果只在一个git上开发的话,bug会越来越多,原来bug ...
js 三元表达式
JavaScript三元运算符的多种使用技巧发现代码慢慢写多了的时候会不自觉的将if else 用三元来替代,仅仅是未了让代码更简洁精辟,当然也有人说用三元可以让你有高潮的感觉.最近在写js 的时 ...
CSS content换行技术实现字符animation loading效果
一.之前我的字符loading实现关于字符打点动画实现,我之前使用过box-shadow模拟,还有border+background模拟,还有使用text-shadow实现,以及今年自认为是最好的实 ...
java 多线程1：进程与线程概述
进程和线程谈到多线程,就得先讲进程和线程的概念. 进程进程可以理解为受操作系统管理的基本运行单元.360浏览器是一个进程.WPS也是一个进程,正在操作系统中运行的".exe"都 ...

多种方法实现div两列等高（收集整理）

多种方法实现div两列等高（收集整理）的更多相关文章

随机推荐

热门专题