让两列Div一样高(自适应高度)
来源:互联网 发布:开票软件可以下载吗 编辑:程序博客网 时间:2024/04/30 20:10
正 文:
由于设计页面需要,要把两个并排显示的div实现一样高的效果,n行n列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标。方法有以下几种:1、JS实现(判断2个div高);2、纯css方法;3、加背景图片实现。首先说下本博客实现的2个div一样高的方法(即js方法)。
div css基本布局:
<div id="mm">
<div id="mm1"></div>
<div id="mm2"></div>
</div>
1、js实现div自适应高度
代码如下:
<script type="text/javascript">
<!--
window.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下通过,考虑绝大数人仍然用的是IE,所以并没有在opera和firefoxs下调试,哪位用的是opera或ff,可以帮忙看看飘易博客的DIV是否保持了一致的高度。)
2、纯CSS方法
css里代码(调试通过,但不会显示div下边框,即border-bottom):
/*左右自适应相同高度start*/
#m1,#m2
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#m1,#m2
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#m1:before, #m2:before
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/*左右自适应相同高度end*/
3、加背景图片
这个方法,很多大网站在使用,如163,sina等。
XHTML代码:
<div id="wrap">
<div id="column1">这是第一列</div>
<div id="column1">这是第二列</div>
<div class="clear"></div>
</div>
CSS代码:
#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}
还有其他的一些方法,但主流就是这几种了。如果你还有关于多个div自适应高度的好的代码,请给我们留言,欢迎与我们讨论。
- 让两列Div一样高(自适应高度)
- 让两列Div一样高(自适应高度)
- 让并排的两个Div自适应高度(一样高)
- DIV的自适应高度和等高
- div 列高度一样
- div模拟实现textarea(高度自适应)
- DIV自适应高度
- DIV自适应高度解决办法
- div 自适应高度
- 高度自适应div
- div css高度自适应
- div+css自适应高度
- DIV高度自适应窗口
- div并排 自适应高度
- div高度自适应
- 笔记:DIV高度自适应
- javascript DIV高度自适应
- DIV自适应高度
- C语言递归访问文件
- 一个脚本的诞生
- 非阻塞IO典型例子
- "易语言.尘土"界面库2.0版源代码分析(1):缘起
- 第一页
- 让两列Div一样高(自适应高度)
- 从csdn论坛学sql--1
- Little prince
- 第一次笔试题
- SQL研究-分区表
- 简要分析cpu-z和gpu-z软件
- 值得用一生回味的经典语录
- C++线程封装JAVA线程操作
- Hibernate与常用连接池的配置