多种方法实现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 ...

随机推荐

转：ASP.NET MVC 将IList<T>导出Excel文档的泛型类
/// <summary> /// 提供将泛型集合数据导出Excel文档. /// </summary> /// <typeparam name="T" ...
django post和get 比较
当我们提交表单仅仅需要获取数据时就可以用GET: 而当我们提交表单时需要更改服务器数据的状态,或者说发送e-mail,或者其他不仅仅是获取并显示数据的时候就使用POST. 在这个搜索书籍的例子里,我们 ...
ERROR: JDWP Unable to get JNI 1.2 environment的错误解决方法
在用java编程的时候,在debug模式下偶尔会出现下面的错误,jdk1.6.0-rc1: ERROR: JDWP Unable to get JNI 1.2 environment, jvm-> ...
PHPEXCEL导出excel表格中长数字文本自动转为科学计数法的解决办法
方法一:前面加空格 $objActSheet->setCellValue('A1', ' '.'330602198804224688'); 方法二: $objActSheet->setCe ...
unity, texture import settings
如果图片带透明通道,则若勾选Alpha Is Transparency,图片会呈现透明的预览效果. 但Alpha Is Transparency勾选与否是否影响shader的输出效果目前我还不太清 ...
Linux安装Qt详细步骤亲测总结
下载 qt-everywhere-opensource-src-4.8.4.tar.gz================准备工作====================yum install kern ...
Python文件遍历二种方法
分享下有关Python文件遍历的两种方法,使用的OS模块的os.walk和os.listdir实现. 关于Python的文件遍历,大概有两种方法,一种是较为便利的os.walk(),还有一种是利用os ...
【Android】5.7 图片库（Galery）
分类:C#.Android.VS2015: 创建日期:2016-02-07 一.简介图库(也叫画廊)是一个布局小部件,用于在可水平滚动的列表中显示每一副图片,当前所选的图片将置于视图的中心. 注意: ...
Linux经常使用命令(六) - mv
mv命令是move的缩写.能够用来移动文件或者将文件改名(move (rename) files),是Linux系统下经常使用的命令,经经常使用来备份文件或者文件夹. 1．命令格式: mv [选项] ...
SOCKET编程需要注意的问题
1.socket编程首先要做的就是加载库,有两种方法: 1.不需要加载库文件 if(!AfxSocketInit()) { AfxMessageBox("加载套接字库失败!"); ...

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

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

随机推荐

热门专题