三种Div高度自适应的方法
让DIV高度自适应,这是在网页设计中常遇到的问题,为了给大家提供参考,这里提供3种div高度自适应的方法:一是JS法、二是背景图填充法、三是“补丁大法”(比较变态)。
1、JS法
代码如下。原理:用JS判断左右DIV的高度,若不一致则设为一致。框架资源分享
![](http://www.iteye.com/images/icon_star.png)
- <div style="width:500px;background:#cccccc;height:0px;">
- <div id="right" style="width:380%;height:100%;float:left;border:1px solid #265492;">left</div>
- <div id="left" style="width:60%;;float:left;background:#376037;">
- right<br>
- right<br>
- right<br>
- right<br>
- right<br>
- right<br>
- right<br>
- </div>
- </div>
- <script type="text/javascript">
- <!--
- var a=document.getElementById("left");
- var b=document.getElementById("right");
- if(a.clientHeight<b.clientHeight){
- a.style.height=b.clientHeight+"px";
- }else{
- b.style.height=a.clientHeight+"px";
- }
- -->
- </script>
这是大站用得比较多的方法,如163等,研究了一下,结果如下。2、背景图填充法
这里是给父DIV设置了背景图片填充,所有DIV都不设高度。前端资源分享
HTML代码:
![](http://www.iteye.com/images/icon_star.png)
- <div class="endArea">
- <div class="col1">第一列 左边正文</div>
- <div class="col3">第二列 右边<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />字字</div>
- <div class="col2">第三列 中间图片</div>
- <div class="clear"></div>
- </div>
CSS代码:
![](http://www.iteye.com/images/icon_star.png)
- .endArea{margin:0 auto; width:960px; background:url(http://cimg2.163.com/cnews/img07/end_n_bg1.gif); clear:both;}
- .endArea .col1{float:left; width:573px; }
- .endArea .col2{float:left; width:25px; }
- .endArea .col3{float:right; width:362px;}
3、补丁大法
就是“隐藏容器溢出”和“正内补丁”和“负外补丁”结合的方法。比较另类的方法,在IE6、IE7、FF3下测试通过。要点:
1、父DIV设置 overflow:hidden;框架资源分享
2、对要高度自适应的DIV设置 padding-bottom:100000px;margin-bottom:-100000px; 两列或多列同理。
代码如下:
![](http://www.iteye.com/images/icon_star.png)
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>Div高度自适应</title>
- <style type="text/css">
- #wrap{overflow:hidden;}
- #sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}
- </style>
- </head>
- <body>
- <div id="wrap" style="width:300px; background:#FFFF00;">
- <div id="sidebar_left" style="float:left;width:100px; background:#777;">居左</div>
- <div id="sidebar_mid" style="float:left;width:100px; background:#999;">
- 居中<br />
- 居中<br />
- 居中<br />
- 居中<br />
- 居中<br />
- 居中<br />
- 居中<br />
- </div><div id="sidebar_right" style="float:right;width:100px; background:#888;">居右</div></div>
- </body>
- </html>
以上三种方法都可以解决Div高度自适应,请根据你自己的需要,三选一
三种Div高度自适应的方法相关推荐
- 三种有效解决DIV高度自适应的方法
本文和大家重点讨论一下DIV高度自适应的三种有效解决方法,它们分别是一是JS法.二是背景图填充法.三是"补丁大法"(比较变态). DIV高度自适应的三种有效解决方法 DIV+CSS ...
- HTML变列自适应布局三行,CSS三行三列DIV高度自适应的设置
上一篇博客里引用了www.52css.com里的一篇关于使用脚本控制三行三列div高度自适应的设置方法,其实不必如此麻烦,只要给父div设置一个固定高度,比如10px,其子div的height:100 ...
- html列自动变高,HTML_CSS三行三列DIV高度自适应的设置,用脚本控制三行三列div高度自 - phpStudy...
CSS三行三列DIV高度自适应的设置 用脚本控制三行三列div高度自适应的设置方法,其实不必如此麻烦,只要给父div设置一个固定高度,比如10px,其子div的height:100%就可实现高度自适应 ...
- 6种iframe高度自适应的方法
js自适应高度,实际上就是设置iframe的高度,设置等于内嵌网页的高度,从而看不到滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用.我们可以通过css来给它直接定义一个高度,同样可以实现上面的需 ...
- DIV高度自适应方法汇总-----摘自网友
你对DIV高度自适应的方法是否了解,这里和大家分享一下,网站制站中,我们经常要把两个并排显示的div实现一样高的效果,即每列高度相同,有以下几种方法. DIV高度自适应方法汇总 网站优化(seo)中, ...
- 四种方法解决DIV高度自适应问题
四种方法解决DIV高度自适应问题 参考文章: (1)四种方法解决DIV高度自适应问题 (2)https://www.cnblogs.com/smght/p/4505614.html 备忘一下.
- float div高度自适应
float div高度自适应(解决div float后,父div高度无法自适应的问题) 在用CSS+DIV的布局中,经常会发现,当一个DIV float之后,如果他的高度超过了其父DIV的高度时,其父 ...
- 这种div高度自适应确定你知道吗?
1. 随子元素div高度自适应 如何下面的child1和child2浮动,parent高度就会为0,前提child1和child2都有高度,如果你想parent的高度自适应,请继续阅读 <bod ...
- video.js视频高度自适应解决方法
video.js视频高度自适应解决方法 1.引入两个外部文件,或者下载到本地 <link href="https://unpkg.com/video.js/dist/video-js. ...
最新文章
- linux内存分配 连续 足够,linux内存池能分配连续物理内存吗
- 解决getOutputStream() has already been called for this response[java io流]
- 【OpenCV 4开发详解】图像直方图绘制
- Mac OSX Versions输入username按1下都会出现2个字符,并且不能create,解决方法
- UVa 111 - History Grading
- 产品经理在工作中如何进行沟通
- QML和C ++之间的数据类型转换
- 成都东万计算机学校,东兴区东方科技职业技术学校
- Ubuntu DNS bind9 配置
- discuz程序的阅读(1)
- 第二批鸿蒙手机排行,鸿蒙系统第二批升级机型有哪些 鸿蒙系统第二批升级机型名单一览...
- UnicodeDecodeError(转)
- Json.NET特殊处理64位长整型数据
- python 遍历数组gbk编码_python bytes和bytearray、编码和解码
- 导入php插件_微信公众号吸粉的方法(将网站100%的流量导入到公众号中)
- 20200106每日一句
- 火山软件开发访问网页查找电话号和读写文件应用
- 阿里视频直播自定义推拉流地址生成
- python上方菜单栏不见了_Jupyter Notebook开始菜单栏Anaconda下消失的问题解决方法
- Android学习笔记(2)——探究活动