网站优化(seo)中,提到过网站样式的优化,即在网站的布局设计中,采用DIV+CSS来布局。网站制站中,我们经常要把两个并排显示的div实现一样高的效果,即每列高度(事先并不能确定哪列的高度)的相同,有以下几种方法(方法来源来互联网):
1、JS实现(判断2个div高);
2、纯css方法;
3、加背景图片实现。
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下通过,并没有在opera和firefoxs下测试。
但如果是用JQUERY写同样的功能,兼容所有浏览器了~
JQ方法如果要的话,请留言~嘿嘿
)
2、纯CSS方法
css里代码(IE下测试通过,但不会显示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;}
============ 欢迎各位老板打赏~ ===========
与本文相关的文章
- · 小程序可以绑定其它小程序吗?
- · vue3+vite+多环境发面到二级目录配置
- · 微信小程序防止事件穿透防止事件冒泡
- · 普通链接二维码跳转小程序
- · 解决flex-direction: column 之后元素宽度自动变为100%
- · vue/react/node/vite/npm/yarn build自动更新版本号
- · getVisitDistribution 访问来源定义(访问来源 key 对应关系)
- · TinyMCE工具栏配置详解
- · Ant Design Vue 1.7.8 (vu2)自定义路由菜单图标
- · vue获取节点的父节点、兄弟节点、子节点
- · vue3+vite3实现路由自动化
- · h5吹气互动(利用recorderjs获取输入音量大小)