本文介绍了一种实现网页双栏等高的自适应布局方法，通过JavaScript动态设置左栏高度匹配右栏，解决了传统方法中边框导致的问题。
在网页设计中,如何让两个层的高度由内容自适应一直是比较麻烦的事情.以前在蓝色理想上看到用外层将超出部分隐藏掉的方法来实现自适应,可是我的层有边框,这个就不行了.试了几天,终于找到一个比较不错的方法.
html代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>newdocument</title>
<styletype="text/css">
#left{
float:left;
width:100px;
height:100px;
background:#eee
}
#dd{
float:right;
height:300px;
width:100px;
background:#ccc
}
</style>
</head>
<body>
<divid="left">
</div>
<divid="dd">
</div>
<scripttype="text/javascript">
vara=document.getElementById("dd").clientHeight;
document.getElementById("left").style.height=a;
</script>
</body>
</html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>newdocument</title>
<styletype="text/css">
#left{
float:left;
width:100px;
height:100px;
background:#eee
}
#dd{
float:right;
height:300px;
width:100px;
background:#ccc
}
</style>
</head>
<body>
<divid="left">
</div>
<divid="dd">
</div>
<scripttype="text/javascript">
vara=document.getElementById("dd").clientHeight;
document.getElementById("left").style.height=a;
</script>
</body>
</html>
效果如下:
o(∩_∩)o...哈哈
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
