DIV+CSS网页另类上下布局的实例代码

最新推荐文章于 2021-08-03 21:37:26 发布

lomo_2019

最新推荐文章于 2021-08-03 21:37:26 发布

阅读量766

点赞数

先说说在尝试的过程发现的几个问题
1、盒模型问题
相信玩重构或者说是DIV+CSS的朋友应该都知道这个东西，废话不多说，不知道而有兴趣可以去网上搜索一下。这里我提到这个是因为这个布局是用百分比来控制的，所以当加对边框加上1px的边后，就不好减回来，我是舍弃了上边的边框样式。

2、溢出问题
这个问题只要对overflow做hidden就可以了，防止内容过长而溢出。刚刚开始的时候可以对html跟body的overflow加一个hidden属性。Blank 告诉我，IE默认是有滚动条的宽度（这个偶知道），而FF是没有的（这个偶就不知道了）。

基本上也就这样，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>上下层测试</title> 
<style type="text/css"> 
<!-- 
*{ 
margin:0px; 
padding:0px; 
} 
html,body{ 
height:100%; 
} 
* html, * html body { 
overflow: hidden; /*隐藏IE的默认滚动条的宽度*/ 
} 
#bodyDiv{ 
width:100%; 
height:100%; 
} 
#topDiv{ 
height:88%; 
background:#ccc; 
border:1px solid #000; 
overflow:auto; /*溢出的时候显示滚动条为 auto */ 
} 
#bottomDiv{ 
height:12%; 
background:#f4f4f4; 
border:1px solid #F00; 
margin-top:-4px; 
overflow:auto; 
} 
h3{ 
font-size:14px; 
font-weight:bold; 
} 
--> 
</style> 
</head> 
<body> 
<div id="bodyDiv"> 
<div id="topDiv"><h3>上面的</h3> 
<br><br> 
<br><br> 
<br><br> 
<br><br> 
<br><br> 
<br><br> 
<br><br> 
<br><br> 
<br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br 
/><br><br><br><br> 
</div> 
<div id="bottomDiv"><h3>下面的</h3></div> 
</div> 
</body> 
</html> 
</body> 
</html>

在这里插入图片描述