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

最新推荐文章于 2021-06-10 01:41:16 发布
最新推荐文章于 2021-06-10 01:41:16 发布
阅读量218 收藏
点赞数
文章标签： xhtml javascript ViewUI

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:0; padding:0;}
#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:0; line-height:0; clear:both; content:"";}/*清楚浮动*/

2.负边距实现

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

*{ margin:0; padding:0;}
#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:0; line-height:0; clear:both; content:"";}

3.使用border实现等高

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

*{ margin:0; padding:0;}
#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:0; right:0;/*使元素靠右*/}

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>
View Code

参考：

weixin_33883178
关注
实现两个div自适应等高的两种方式
jinbiao8246的博客
05-20 832
1.利用padding 话不多说，直接上代码： .box{ overflow: hidden; } .left{ background-color: green; float: left; width: 20%; margin-bottom: -9999px; padding-bottom: 9999px; } .right{ background-color: hotpink;
css两列等高,多种方法实现div两列等高（收集整理）
weixin_28805935的博客
08-03 792
HTML骨架<divid="header">头部div><divid="container"><divclass="mainbox">主内容区域div><divclass="sidebox">侧边栏div>div><divid="footer">页脚div>1.背景模拟(使用背景图片实现等高)：背景模拟主要依...
CSS多种方法实现div两列等高
01-29
CSS多种方法实现div两列等高布局 ， 前端工程师必备知识，div两列等高
div+css实现的左右两个等高div
weixin_30435261的博客
02-22 397
工作当中我们经常会有这样的需求，尤其是在一些内容页面或者网站后台管理页面：左边的div的高度会随着右边的div的内容的增加儿增加，右边div的高度也会随着左边div的内容的增加而增加，也就是左右两侧两个等高的div。如果不借助JS，而是单纯的使用div+css的方法该怎么实现呢？见代码： <!doctype html> <html> <head&g...
html 左右div同高,css 左右DIV等高
weixin_31966453的博客
06-10 290
文章参考http://blog.csdn.net/wodetiankong516/article/details/12010121http://dreamweaver.abang.com/od/divcss/a/div-denggao0.htm.wrap{overflow: hidden;}.left{width: 200px;margin-bottom:-10000px;padding-bott...
左右两个DIV等高的四种方法
weixin_30783629的博客
04-12 1043
1：使用背景图 就是两个DIV外面套一个DIV，然后repeat-y一个背景图，这种方法不是真的等高，只是只要有一个内容增多，背景图就会纵向重复，形成左右等高的效果。 2：使用表格 用table，两个TD，一侧内容增加另一侧会自动拉长 3：使用CSS控制（个人感觉最好的方法） 两个DIV都设{margin-bottom:-10000px; padding-b...
div+css实现两列table效果示例
12-13
在网页设计中，使用`div`和`css`布局是一种常见的方法，它可以实现灵活多样的网页结构。在本示例中，我们看到如何利用这些技术创建一个两列的表格效果。这种效果通常用于构建信息输入表单或者数据展示区域。 首先，...
div的两列居中放置并对每个div设计css样式
09-25
首先，要实现两列布局并让它们居中，我们可以采用一个外层的容器div（content），并在其中使用两个子div（side和main）。子div将通过CSS设置为浮动元素（使用float属性），使得它们并排显示。 接下来，我们会探讨到...
用JS实现2个DIV等高特效代码
03-20
以上就是使用JavaScript实现`div`等高特效的基本方法。需要注意的是，随着响应式设计的发展，现代CSS框架如Bootstrap和Flexbox提供了更简洁的方法来实现等高布局，但了解如何使用JavaScript解决此类问题仍然是重要的...
div多列等高处理，实现多个div等高
07-20
div多列等高，实现多个div等高，同一水平的div框
div两边等高
w_t_y_y的博客
01-13 3658
现有两个横向排列的div，希望两个div高度保持一致，有以下方法：
让两列Div一样高（自适应高度）
twosecond
06-23 2575
正 文：    由于设计页面需要，要把两个并排显示的div实现一样高的效果，n行n列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标。方法有以下几种：1、JS实现（判断2个div高）；2、纯css方法；3、加背景图片实现。首先说下本博客实现的2个div一样高的方法（即js方法）。    div css基本布局：    1、js实现div自适应高度代码如下
html+css清楚浮动3种方法，父级div获取高度
sevenbblythelulu的博客
08-12 2770
1、父级div中 :                     overflow:auto;自适应高度 （必须定义width，或zoom:1,同时不能定义height；内部宽高超出父级时，会出现滚动条）                     overflow:hidden(必须定义width，或zoom:1,同时不能定义height;不能与position连用，因为内容会被隐藏)
css实现左右两个div等高
weixin_30700977的博客
07-26 622
提出问题： 现在有两个div，但是两个div里面内容多少不确定，可能左边多，可能右边多，css要如何设置可以保证左右两边的div等高呢？ 解决方案： 每个div使用display:table-cell div的父元素使用display:box 示例代码1： <!DOCTYPE html> <html lang="en"> <head> <me...
如何让2个并列的div自动等高（不设高度）
mrhaoxiaojun的博客
01-02 4345
1， table：css:*{margin: 0; padding: 0;} table{width: 100%; height: 100%}html:<table border="1"><tr><td colspan="2" style="height:50px; background:#333"></td></tr><tr><td style="width: 50px; background:#
并列div 等高（任何一个变高，其余随之变高）
撸码方为上策
03-17 674
直接上html .wrap{ border: 2px solid red; width: 300px; display: table; } .wrap .child{
css实现两个div并排等高
闲听风月
08-16 1389
原文链接：http://blog.csdn.net/qinshenxue/article/details/44861695css实现两个div并排等高 css实现两个div并排等高 方法一 table-cell 代码 运行结果 方法二 css3盒模型 代码 运行结果 方法一 table-cell代码<!DOCTYPE html> <html> <head> <meta cha
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值