Arc*_*ian 18 html css css-position sticky-footer
有没有办法设置布局,使标题是50px,正文是100%,页脚是50px？
我希望身体至少用完整个观察区域.我希望网页和页眉始终在屏幕上
Wol*_*Dev 15
我在jsfiddle中创建了一个示例:
更新的JsFiddle:http://jsfiddle.net/5V288/1025/
HTML:
<body>
<div id="header"></div>
<div id="content"><div>
Content
</div></div>
<div id="footer"></div>
</body>
CSS:
html { height: 100%; }
body {
height:100%;
min-height: 100%;
background: #000000;
color: #FFFFFF;
position:relative;
}
#header {
height:50px;
width:100%;
top:0px;
left:0px;
background: #CCCCCC;
position:fixed;
}
#footer {
height:50px;
width:100%;
bottom:0px;
left:0px;
background: #CCCCCC;
position:fixed;
}
#content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height:100%;
padding: 0 20px;
}
#content > div {
padding: 70px 0;
}
没有边框,内容将是高度100%+ 140px填充.使用边框,内容高度将为100%,填充将在内部.