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

随机推荐

caffe make 编译
其实嘛,出现这个的原因在于,已经编译过啦,没有任何改动,那还烦劳编译啥呢. 那Linux又是如何知道已经编译过了呢? 那就要看makefile的规则啦.makefile的规则是所想产生的文件需要依赖很 ...
sql server中bit字段实现取反操作
update Fct_StockMove set Disabled=Disabled^1 WHERE MoveId='DCE268E0-2CB3-4D17-AC4E-0046FB459CAD'; 1. ...
springboot http2
转 Spring Boot With Http2 原文链接 http://www.jianshu.com/p/3d7ac535d6a0 拓展链接 http://www.jianshu.com/p/97 ...
python标准库介绍——10 sys 模块详解
==sys 模块== ``sys`` 模块提供了许多函数和变量来处理 Python 运行时环境的不同部分. === 处理命令行参数=== 在解释器启动后, ``argv`` 列表包含了传递给脚本的所有 ...
java从Object类型转换成double类型
java从Object类型转换为double类型: Map<String,Object> map = new HashMap<String,Object>(); map.put ...
Clojure 下的 xpath 库
clj-xpath 项目网站 Github
BBED标记坏块以及修复坏块
创建測试表: ZBDBA@orcl11g>select * from zbdba; NAME -------------------------------------------------- ...
Spring 一二事（10） - annotation AOP
先贴出POM的内容,这个毕竟是用的maven来简单构建的 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:x ...
NEXYS 3开发板练手--USB UART(三)
接着上一篇,今天我们来建立一个能用于实际工程中的DEMO. 首先,为了使我们的发送机不像上一个DEMO一样无节制的循环发送,我们需要修改代码,增加使发送机停止发送的控制部分,修改后的代码如下: `ti ...
FPGA基础设计（四）：IIC协议
很多数字传感器.数字控制的芯片(DDS.串行ADC.串行DAC)都是通过IIC总线来和控制器通信的.不过IIC协议仍然是一种慢速的通信方式,标准IIC速率为100kbit/s,快速模式速率为400kb ...

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

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

随机推荐

热门专题