获取div占据100％身高，减去固定高度的页眉和页脚
从我的研究，这似乎是一个绝对经典的CSS问题，但我找不到一个明确的答案 – 所以StackOverflow是。
如何设置内容div占据身高的100％，减去固定页眉和页脚占用的高度？
<body> <header>title etc</header> <div id="content">body content</div> <footer>copyright etc</footer> </body> //CSS html, body { height: 100%; } header { height: 50px; } footer { height: 50px; } #content { height: 100% of the body height, minus header & footer } 我想使用纯粹的CSS，并在整个浏览器的答案是bulletproof。
这个版本将在所有最新的浏览器中工作，如果你有现代化的脚本（如果不是只是把header和footer改成div ），ie8就可以工作：
小提琴
html, body { min-height: 100%; padding: 0; margin: 0; } #wrapper { padding: 50px 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #content { min-height: 100%; background-color: green; } header { margin-top: -50px; height: 50px; background-color: red; } footer { margin-bottom: -50px; height: 50px; background-color: red; } p { margin: 0; padding: 0 0 1em 0; }
<div id="wrapper"> <header>dfs</header> <div id="content"> </div> <footer>sdf</footer> </div>
只要不是跨浏览器的解决scheme，你可能会利用calc(expression)来达到目的。
html, body { height: 100%; } header { height: 50px; background-color: tomato } #content { height: -moz-calc(100% - 100px); /* Firefox */ height: -webkit-calc(100% - 100px); /* Chrome, Safari */ height: calc(100% - 100px); /* IE9+ and future browsers */ background-color: yellow } footer { height: 50px; background-color: grey; }
JsFiddle示例
如果你想了解更多关于calc(expression)你最好访问这个网站。
当我试图find这个问题的答案时，这仍然是谷歌的最高结果。 我不需要在我的项目中支持旧的浏览器，我觉得我在柔性盒中find了更好，更简单的解决scheme。 下面的CSS代码片段是必要的。
我还展示了如何使屏幕高度太小的主要内容滚动。
html, body { height: 100%; } body { display: flex; flex-direction: column; } header { min-height: 60px; } main { flex-grow: 1; overflow: auto; } footer { min-height: 30px; }
<body style="margin: 0px; font-family: Helvetica; font-size: 18px;"> <header style="background-color: lightsteelblue; padding: 2px;">Hello</header> <main style="overflow: auto; background-color: lightgrey; padding: 2px;"> <article style="height: 400px;"> Goodbye </article> </main> <footer style="background-color: lightsteelblue; padding: 2px;">I don't know why you say, "Goodbye"; I say, "Hello."</footer> </body>
新的，现代的方法是通过从视口的垂直高度中减去页眉和页脚的高度来计算垂直高度。
//CSS header { height: 50px; } footer { height: 50px; } #content { height: calc(100vh - 50px - 50px); }
你可以采取CSS属性框大小的优点。
#content { height: 100%; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ padding-top: 50px; margin-top: -50px; padding-bottom: 50px; margin-bottom: -50px; }
看到JsFiddle 。
试图计算页眉和页脚是不好的:(devise应该简单，自我解释，简单易懂，计算只是…不容易，对于人来说不容易，在机器上有点难。
你正在寻找的是圣杯devise的一个子集。
这是一个使用柔性显示器的实现。 除了页脚和页眉之外，它还包括侧栏。 请享用：
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset=utf-8 /> <title>Holy Grail</title> <!-- Reset browser defaults --> <link rel="stylesheet" href="reset.css"> </head> <body style="display: flex; height: 100%; flex-direction: column"> <div>HEADER<br/>------------ </div> <!-- No need for 'flex-direction: row' because it's the default value --> <div style="display: flex; flex: 1"> <div>NAV|</div> <div style="flex: 1; overflow: auto"> CONTENT - START<br/> <script> for (var i=0 ; i<1000 ; ++i) { document.write(" Very long content!"); } </script> <br/>CONTENT - END </div> <div>|SIDE</div> </div> <div>------------<br/>FOOTER</div> </body> </html>
这个问题已经很好的回答了，但我冒昧地添加一个javascript解决scheme。 只要给你想'扩大'ID footerspacerdiv ，这个JavaScript片段将扩大该div，直到页面占用浏览器窗口的全部高度。
它的工作原理是，当页面小于浏览器窗口的整个高度时，document.body.scrollHeight等于document.body.clientHeight。 while循环增加footerspacerdiv的高度，直到document.body.scrollHeight大于document.body.clientHeight为止。 在这一点上， footerspacerdiv实际上是1像素太高，浏览器将显示一个垂直滚动条。 因此，脚本的最后一行将footerspacerdiv的高度降低了一个像素，使得页面高度恰好是浏览器窗口的高度。
通过将footerspacerdiv放置在页面的“页脚”上方，可以使用此脚本将页脚“向下推”到页面的底部，以便在短页面上，页脚与浏览器窗口的底部齐平。
<script> //expand footerspacer div so that footer goes to bottom of page on short pages var objSpacerDiv=document.getElementById('footerspacer'); var bresize=0; while(document.body.scrollHeight<=document.body.clientHeight) { objSpacerDiv.style.height=(objSpacerDiv.clientHeight+1)+"px"; bresize=1; } if(bresize) { objSpacerDiv.style.height=(objSpacerDiv.clientHeight-1)+"px"; } </script>
这是一个不使用负边界或calc的解决scheme。 运行下面的代码片段查看最终结果。
说明
我们给页眉和页脚一个30px的固定高度，并将它们分别放在顶部和底部。 为了防止内容掉下来，我们使用两个类： below-header和above-footer来填充上面和下面的div的30px 。
所有的内容被包装在一个position: relative ，使页眉和页脚在内容的顶部/底部，而不是窗口。
我们使用fit-to-parent和min-fit-to-parent来填充页面。 这给了我们一个至less与窗口一样低的粘性页脚，但是如果内容比窗口更长则隐藏。
在页眉和页脚内部，我们使用display: table和display: table-cell样式来为页眉和页脚提供一些垂直填充，而不会中断页面的收缩包装质量。 （给他们真正的填充可能会导致页面的总高度超过100% ，这将导致一个滚动条出现，当它不是真的需要。）
.fit-parent { height: 100%; margin: 0; padding: 0; } .min-fit-parent { min-height: 100%; margin: 0; padding: 0; } .below-header { padding-top: 30px; } .above-footer { padding-bottom: 30px; } .header { position: absolute; top: 0; height: 30px; width: 100%; } .footer { position: absolute; bottom: 0; height: 30px; width: 100%; } /* helper classes */ .padding-lr-small { padding: 0 5px; } .relative { position: relative; } .auto-scroll { overflow: auto; } /* these two classes work together to create vertical centering */ .valign-outer { display: table; } .valign-inner { display: table-cell; vertical-align: middle; }
<html class='fit-parent'> <body class='fit-parent'> <div class='min-fit-parent auto-scroll relative' style='background-color: lightblue'> <div class='header valign-outer' style='background-color: black; color: white;'> <div class='valign-inner padding-lr-small'> My webpage </div> </div> <div class='fit-parent above-footer below-header'> <div class='fit-parent' id='main-inner'> Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory Lorem ipsum doloris finding dory </div> </div> <div class='footer valign-outer' style='background-color: white'> <div class='valign-inner padding-lr-small'> © 2005 Old Web Design </div> </div> </div> </body> </html>
