如何使标题和页脚之间的DIV高度100％ [英] how to make DIV height 100% between header and footer
问题描述
有没有办法设置一个布局，使标题是50px，body是100％，页脚是50px？
我想要的身体使用整个观看区域至少。
我在jsfiddle中创建了一个示例：
UPDATED JsFiddle： http://jsfiddle.net/5V288 / 1025 /
HTML：
身体>
< div id =header>< / div>
< div id =content>< div>
Content
< / div>< / div>
< div id =footer>< / div>
< / body>
CSS：
code> 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;
}
没有border-box，内容将是height 100％+ 140px padding。使用border-box时，内容高度将为100％，内边距为内边距。
Is there a way to setup a layout so that the header is 50px, body is 100% and footer is 50px?
I would like the body to use up the entire viewing area at minimum. I would like to have the footer and header to be on the screen at all times
I created an example in jsfiddle:
UPDATED 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;
}
Without border-box the content will be height 100% + 140px padding. With the border-box the content height will be 100% and the padding will be inside.
这篇关于如何使标题和页脚之间的DIV高度100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
