我想建立一个由三部分组成的页面:
如果有CSS解决方案,我宁愿使用CSS而不是JavaScript来实现。
我尝试了各种版本的以下代码,但主要部分只会扩展到其内容所推动的范围:
- 固定高度的页眉
- 可自适应的主要部分
- 固定高度的页脚
如果有CSS解决方案,我宁愿使用CSS而不是JavaScript来实现。
我尝试了各种版本的以下代码,但主要部分只会扩展到其内容所推动的范围:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body, header, main, footer {
width:100%;
display:block;
}
body{
display:block;
position:relative;
height:100%;
min-height:100%;
padding:0;
margin:0;
}
header{
background-color:#ccc;
height:100px;
}
footer{
height:100px;
background-color:#ccc;
}
main {
border:1px solid #f00;
}
#wrapper{
height:100%;
min-height:100%;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
Header
</header>
<main>
Main
</main>
<footer>
Footer
</footer>
</div>
</body>
</html>