我正在尝试创建一个设计的HTML页面。但有一个问题困扰着我。 CSS和HTML结构如下图所示。 我希望页脚在页面底部,当内容区域增长时,应将页脚推到下方。但如果没有内容,则内容区域应保持到页脚。 实际上,内容区域覆盖了标题栏和页脚区域。 我不知道我是否将其结构化正确。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html, body { height:100%;}
body {
background: #EBEBEB;
margin: 0px;
padding: 0px;
}
#wrapper {
width:100%;
height:100%;
margin: 0 auto;
position:relative;
}
#header {
width:100%;
height:147px;
background:#999;
border-bottom:solid 5px #ddd;
position:absolute;
}
#footer {
bottom:0;
width:100%;
height:170px;
position:absolute;
background-color:#ccc;
border-top:solid 5px #ddd;
}
#contentArea {
width:300px;
max-height:100%;
position:absolute;
z-index:999;
left:0;
right:0;
top:0;
bottom:0;
margin-left:auto;
margin-right:auto;
margin-top:120px;
margin-bottom:100px;
background:#FFF;
border:solid 1px red;
}
</style
</head>
<body>
<div id="wrapper">
<div id="header">Header</div>
<div id="footer">footer</div>
<div id="contentArea">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</body></html>
你可以在这里检查代码。