DIV高度自适应方法汇总-----摘自网友
你对DIV高度自适应的方法是否了解,这里和大家分享一下,网站制站中,我们经常要把两个并排显示的div实现一样高的效果,即每列高度相同,有以下几种方法。
DIV高度自适应方法汇总
网站优化(seo)中,提到过网站样式的优化,即在网站的布局设计中,采用DIV+CSS来布局。网站制站中,我们经常要把两个并排显示的div实现一样高的效果,即每列高度(事先并不能确定哪列的高度)的相同,有以下几种方法解决DIV高度自适应问题:
1、JS实现(判断2个div高);
2、纯CSS方法;
3、加背景图片实现。
◆DIV+CSS基本布局:
- <dividdivid="mm">
- <dividdivid="mm1"></div>
- <dividdivid="mm2"></div>
- </div>
1、js实现div高度自适应
代码如下:
- <scripttypescripttype="text/javascript">
- <!--
- windowwindow.onload=window.onresize=function(){
- if(document.getElementById("mm2").clientHeight<document.
- getElementById("mm1").clientHeight){
- document.getElementById("mm2").style.height=document.
- getElementById("mm1").offsetHeight+"px";
- }
- else{
- document.getElementById("mm1").style.height=document.
- getElementById("mm2").offsetHeight+"px";
- }
- }
- -->
- </script>
(注:网上公布了不少方法,但代码或多或少有错;上面的是无错代码;上面的代码在IE6.0/IE7.0下通过,并没有在opera和firefoxs下测试。)
2、纯CSS方法实现DIV高度自适应
CSS里代码(IE下测试通过,但不会显示div下边框,即border-bottom):
- /*左右自适应相同高度start*/
- #m1,#m2
- {
- padding-bottom:32767px!important;
- margin-bottom:-32767px!important;
- }
- @mediaalland(min-width:0px){
- #m1,#m2
- {
- padding-bottom:0!important;
- margin-bottom:0!important;
- }
- #m1:before,#m2:before
- {
- content:'[DONOTLEAVEITISNOTREAL]';
- display:block;
- background:inherit;
- padding-top:32767px!important;
- margin-bottom:-32767px!important;
- height:0;
- }
- }
- /*左右自适应相同高度end*/
3、加背景图片实现DIV高度自适应
这个方法,很多大网站在使用,如163,sina等。
XHTML代码:
- <dividdivid="wrap">
- <dividdivid="column1">这是第一列</div>
- <dividdivid="column1">这是第二列</div>
- <divclassdivclass="clear"></div>
- </div>
CSS代码:
- #wrap{width:776px;background:url(bg.gif)repeat-y300px;}
- #column1{float:left;width:300px;}
- #column2{float:right;width:476px;}
- .clear{clear:both;}
还有其他的一些方法源码天空,但主流就是这几种了。如果你还有关于多个div自适应高度的好的代码,请给我们留言,欢迎与我们讨论。
转载于:https://www.cnblogs.com/xiaoleidiv/archive/2013/05/31/3109943.html
DIV高度自适应方法汇总-----摘自网友相关推荐
- html三个div相同高度,两个DIV高度自适应方法(左右两个DIV高度一样)
html: aaaa aaaa bbb 1.使用display:table; 利用的table本身的自适应特性,兼容性好,容易使用#container{width:500px; display: ta ...
- 四种方法解决DIV高度自适应问题
四种方法解决DIV高度自适应问题 参考文章: (1)四种方法解决DIV高度自适应问题 (2)https://www.cnblogs.com/smght/p/4505614.html 备忘一下.
- 三种有效解决DIV高度自适应的方法
本文和大家重点讨论一下DIV高度自适应的三种有效解决方法,它们分别是一是JS法.二是背景图填充法.三是"补丁大法"(比较变态). DIV高度自适应的三种有效解决方法 DIV+CSS ...
- 三种Div高度自适应的方法
让DIV高度自适应,这是在网页设计中常遇到的问题,为了给大家提供参考,这里提供3种div高度自适应的方法:一是JS法.二是背景图填充法.三是"补丁大法"(比较变态). 1.JS法 ...
- HTML变列自适应布局三行,CSS三行三列DIV高度自适应的设置
上一篇博客里引用了www.52css.com里的一篇关于使用脚本控制三行三列div高度自适应的设置方法,其实不必如此麻烦,只要给父div设置一个固定高度,比如10px,其子div的height:100 ...
- 这种div高度自适应确定你知道吗?
1. 随子元素div高度自适应 如何下面的child1和child2浮动,parent高度就会为0,前提child1和child2都有高度,如果你想parent的高度自适应,请继续阅读 <bod ...
- html列自动变高,HTML_CSS三行三列DIV高度自适应的设置,用脚本控制三行三列div高度自 - phpStudy...
CSS三行三列DIV高度自适应的设置 用脚本控制三行三列div高度自适应的设置方法,其实不必如此麻烦,只要给父div设置一个固定高度,比如10px,其子div的height:100%就可实现高度自适应 ...
- html中js隐藏div的高度,jQuery实现获取隐藏div高度的方法示例
jQuery实现获取隐藏div高度的方法示例 发布时间:2020-09-22 19:27:55 来源:脚本之家 阅读:95 作者:zhuyangxing 本文实例讲述了jQuery实现获取隐藏div高 ...
- float div高度自适应
float div高度自适应(解决div float后,父div高度无法自适应的问题) 在用CSS+DIV的布局中,经常会发现,当一个DIV float之后,如果他的高度超过了其父DIV的高度时,其父 ...
最新文章
- 找出前50个素数,构成素数表
- 吕乐:医学影像学者的医者仁心 | 智源专访
- 论文阅读|How Does Batch Normalization Help Optimization
- 【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | 通信场景 | Channel 通信机制 | Channel 支持的通信数据类型 | Channel 类型 )
- Ubuntu 14.04 更换为阿里云源
- 加仓减仓口诀_做短线必备口诀
- sql语句中的时间查询
- soap rest_REST是新的SOAP
- windows界面程序设计,设置一个窗口始终在屏幕最前,SetWindowPos函数
- CAD看图软件的快速搜索功能怎么用?
- 流量卡之家:物联网系统解决交通拥堵 全面开启未来绿色出行
- e当前登录环境异常。为了你的帐号安全,暂时不能登录web微信。你可以通过Windows
- CMake Error: The source directory * does not appear to contain CMakeLists.txt.
- 怎么判断两个多项式互素_关于两个多元多项式互素问题
- 智能对话 | 使用 Java实现 智能对话机器人
- linux 论坛的搭建
- 全光谱护眼台灯好吗?2022双十一全光谱台灯这个牌子比较好
- 说一下软件测试行业的优缺点
- 用java实现坏巧克力问题,【原料】关于巧克力在使用中出现的问题详解
- JAVA银企直连建设银行云直连模式超详细讲解