div高度自适应

最新推荐文章于 2024-10-08 10:16:40 发布

housen1987

最新推荐文章于 2024-10-08 10:16:40 发布

阅读量82

点赞数

分类专栏： HTML 文章标签： div css hml 高度自适应

本文链接：https://blog.csdn.net/housen1987/article/details/84167134

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WiseInfo</title>
<style type="text/css">
<!--
* {
}
html, body {
 height:100%;
}
html>body {   /*-- for !IE6.0 --*/
 width: auto;
 height: auto;
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
}
body {
 background-color: #ffffff;
 border:8px solid #ffff00;
}
.main-div {
 width: 100%;
 height: 100%;
}
.top-div{
	height:20px;
	background:#9933FF;
	width:100%;
}
.middle-div{
	background:#00CCFF;
	height:auto;
	width:100%;
	position:absolute;
	top:20px;
	bottom:100px;
	overflow-y:scroll;
}
.bottom-div{
	height:100px;
	background:#FF9900;
	width:100%;
	position:absolute;
 	bottom:0px;
}
</style>
</head>
<body>
	<div class="main-div">
		<div class="top-div">高度20像素</div>
		<div class="middle-div">这一部分是自适应的,显示scroll属性，是为了分辨各个部分的边界</div>
	  <div class="bottom-div">高度100像素</div>
	</div>
</body>
</html>