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

随机推荐

macbook基本配置
1.安装iterm2, 2.安装搜狗输入法, 3.安装迅雷, 4.安装homebrew 5.安装新版的gcc,bash等等,及升级配置文件.
linux工具大全
Linux Performance hi-res: observability + static + perf-tools/bcc (svg)slides: observabilityslides: ...
Effective JavaScript Item 46 优先使用数组而不是Object类型来表示有顺序的集合
本系列作为Effective JavaScript的读书笔记. ECMAScript标准并没有规定对JavaScript的Object类型中的属性的存储顺序. 可是在使用for..in循环对Objec ...
利用面向对象思想封装Konva动态进度条
1.html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
CSS里有哪些常见的块级元素和行内元素以及其区别？
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
LeetCode: Set Matrix Zeroes 解题报告
Set Matrix ZeroesGiven a m x n matrix, if an element is 0, set its entire row and column to 0. Do it ...
LeetCode: Divide Two Integers 解题报告
Divide Two Integers Divide two integers without using multiplication, division and mod operator. SOL ...
Consumer
Description FJ is going to do some shopping, and before that, he needs some boxes to carry the diffe ...
Qt学习之路3---Qt中的坐标系统
-Qt使用统一的坐标系统定位窗口部件和位置大小 -Qt部件类提供成员函数在坐标系统中进行定位 -QWidget类提供了窗口部件所需的坐标系统成员函数代码测试 #include "widge ...
未在本地计算机上注册"Microsoft.Jet.OLEDB.4.0"
答案一: 因为没有安装64位的Jet40驱动.可以到http://www.microsoft.com/downloads/zh-cn/details.aspx?FamilyID=c06b8369-60 ...

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

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

随机推荐

热门专题