![CCCCCC]( "CCCCCC")
本文介绍了如何使标题和页脚之间的DIV高度100％的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 有没有办法设置一个布局，使标题是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％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！ 08-23 03:09