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

随机推荐

python标准库介绍——28 md5 模块详解
==md5 模块== ``md5`` (Message-Digest Algorithm 5)模块用于计算信息密文(信息摘要). ``md5`` 算法计算一个强壮的128位密文. 这意味着如果两个字符 ...
C 指针改变变量值
/** *通过指针改变局部变量值 **/ #include"stdio.h"#include"stdlib.h" void work(char* chuck){ ...
服务器上装filezilla server后，本地的ftp客户端连接不上去
公司一台服务器,上面装了filezilla server后,按平常配置好了,但是在本地用FTP客户端不管怎么连接都连接不上,本地FTP客户端总提示连接失败,远程filezilla server的界面也 ...
struts2漏洞-第一次入侵经历
这两天上数据库,老师给了我们一个网站,该网站是一个售花网站.是有一个师兄写的毕业设计.然后挂在内网,然后使用这个系统,然后分析网站,写个数据库设计的报告.简单的写了数据库作业后就闲来无事做,就想对这个 ...
CCTargetedAction
改变动作执行对象CCTargetedAction 通常默认的动作执行对象是调用runAction的对象,而CCTargetedAction可以改变动作执行对象. CCTargetedAction* t ...
angular学习笔记(二十七)-$http(5)-使用$http构建RESTful架构
在angular中有一个特别为RESTful架构而定制的服务,是在$http的基础上进行了封装. 但是为了学习,我们先看看用直接$http是如何构建RESTful架构的: 假设有一个银行卡的列表.需要 ...
搭建MAC下vim环境
MAC下的IDE实在是不好用,最终放弃了IDE准备直接用vim来看代码了,那么就需要设置一下vim. 将家目录下面.vim中的vimrc用下面的内容替换: " Set vundle sett ...
C++ string的用法
之所以抛弃char*的字符串而选用C++标准程序库中的string类,是因为他和前者比较起来,不必担心内存是否足够.字符串长度等等,而且作为一个类出现,他集成的操作函数足以完成我们大多数情况下(甚至是 ...
Oracle PLSQL Demo - 11.定义包头[Define PACKAGE]
CREATE OR REPLACE PACKAGE temp_package_demo is v_demo ); PROCEDURE p_demo_1(userid NUMBER DEFAULT v_ ...
Filter详解
转自 http://blog.csdn.net/yudaoai/article/details/4231333 filter功能.它使用户可以改变一个 request和修改一个response. Fi ...

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

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

随机推荐

热门专题