div布局

最新推荐文章于 2021-04-02 18:36:09 发布

豌豆干

最新推荐文章于 2021-04-02 18:36:09 发布

阅读量447

点赞数

文章标签： div xhtml html border iframe css

本文链接：https://blog.csdn.net/zhangyu028/article/details/3977622

版权

在 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
模式下

希望上下两部分用两个div布局，上面div(id="div1")固定高度,宽度100%(style="width:100%;height:50px")，下面的div(id="div2")占除掉div1之后的所有空间（在Table模式下设为height=100%,width=100%）,要求div2能在超过高度时出现滚动条（只是div2，不是整个浏览器的滚动条）。

引用：http://topic.csdn.net/u/20090310/16/857c9dd8-0211-4d56-a7ba-66c16b072df9.html

<!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>
<HTA:APPLICATION
ID=oHTA
SCROLL="no"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用CSS构建iframe效果 - Css Iframe - RexSong.com</title>
<style type="text/css">
* { font:12px Arial;}
html {
 height:100%;
 max-height:100%;
 border:0;
 overflow:hidden;
}

* html {
 padding:50px 0 0 0;
}

body {
 height:100%;
 max-height:100%;
 margin:0;
 overflow:auto;
}

#content {
 position:absolute;
 top:50px;
 bottom:0;
 left:0;
 right:0;
 z-index:3;
 width:100%;
 overflow:auto;
 border:solid #000000 1px;
}

* html #content {
 top:50px;
 bottom:0;
 height:100%;

}

#head {
 position:absolute;
 margin:0;
 top:0;
 left:0;
 width:100%;
 height:50px;
 z-index:5;
 border:solid #000000 1px;
}

</style>
</head>
<body>
<div id="head">
sdf
</div>
<div id="content" >
 
 1
 2
 3
4 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
很多回车 
</div>
</body>
</html>