使内容div填充高度可变的页眉和高度固定的页脚之间的空间

Question

我一直在努力使站点布局正常运行一段时间，尽管我使用响应式网格系统解决了许多问题，但尚未解决一个谜。

整个页面将没有任何滚动，而是窗口上的单个页面。 它本质上是一个带有大型菜单的初始页面，因此页面高度和宽度的100％将是窗口中可见的所有内容。

我有一个标头，最大高度为108px，最大长度为800px。 当窗口的宽度小于800px时，整个横幅将调整大小以适合其高度，从而使高度可变。

我还有一个页脚，固定在页面底部，固定高度为100px（可能会根据我的需要进行更改）。 我打算将其包含社交媒体按钮和联系信息，而这根本不需要扩展。

因此，现在的问题是弄清楚如何使中间内容填补它们之间的空白。 内容区域将完全由4列填充，其中仅包含背景图像和少量文本。 我确实找到了一种使用jquery的解决方案，但它似乎没有用。 我不太了解jquery，所以我可能只是不替换我需要的所有东西。

这就是我得到的（图像会一直保留以帮助上下文）：

 var minHeight = 300px; // Define a minimum height for the middle div var resizeMiddle = function() { var h = $('html').height() - $('.section header').height() - $('.section footer').height(); h = h > minHeight ? h : minHeight; $('.section content').height(h); } $(document).ready(resizeMiddle); $(window).resize(resizeMiddle); 

 html { height: 100%; } body { background-image: url('http://server.dewcraft.com/doodleplex/storage/themes/KokenTheme/inc/BG.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center top; background-attachment: fixed; overflow-x: hidden; overflow-y: hidden; border-collapse: collapse; margin: 0; padding: 0; } /* SECTIONS */ .section header { clear: both; padding: 0px; margin: 0px; } .section content{ clear: both; padding: 0px; margin: 0px; height: 100%; } .section footer { clear: both; padding: 0px; margin: 0px; } /* COLUMN SETUP */ .col { display: block; float:left; margin: 0% 0 0% 0%; } .col:first-child { margin-left: 0; } /* GROUPING */ .group:before, .group:after { content:""; display:table; } .group:after { clear:both; } .group { zoom:1; /* For IE 6/7 */ } /* GRID OF FOUR */ .span_4_of_4banner { width: 100%; text-align: center; } .span_4_of_4footer { width: 100%; height: 50px; text-align: center; position: absolute; bottom: 0; } .banner { width: 100%; max-width: 800px; min-width: 300px; margin: 0 auto; } .span_1_of_4draw { width: 25%; height: 100%; background-attachment: local; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url("https://dl.dropboxusercontent.com/u/8624213/ScrewAttack8WPS.png"); } .span_1_of_4graph { width: 25%; height: 100%; background-attachment: local; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url("https://dl.dropboxusercontent.com/u/8624213/ScrewAttack8WPS.png"); } .span_1_of_4pix { width: 25%; height: 100%; background-attachment: local; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url("https://dl.dropboxusercontent.com/u/8624213/ScrewAttack8WPS.png"); } .span_1_of_4ani { width: 25%; height: 100%; background-attachment: local; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url("https://dl.dropboxusercontent.com/u/8624213/ScrewAttack8WPS.png"); } footer { width: auto; height: auto; position: absolute; margin-top: 0; margin-bottom: 0; bottom:0; left:0; display: table-row; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <!DOCTYPE html> <script src="/doodleplex/storage/themes/RonTheme/inc/jquery.bgswitcher.js"></script> <body> <div class="section header group"> <div class="col span_4_of_4banner"> <img class="banner" src="https://dl.dropboxusercontent.com/u/8624213/ronochromaticBannerS.png"/> </div> </div> <div class="section content group"> <div class="col span_1_of_4draw"> 1 of 4 draw </div> <div class="col span_1_of_4graph"> 1 of 4 graphics </div> <div class="col span_1_of_4pix"> 1 of 4 pixelwork </div> <div class="col span_1_of_4ani"> 1 of 4 animation </div> </div> <div class="section footer group"> <div class="col span_4_of_4footer"> {{ site.copyright }} </div> </div> </body> </html> 

有人知道我在做什么错吗？

Answer 1

给定您对站点的描述，您应该能够使用绝对或固定位置以及顶部/底部位置来处理此问题：

http://jsfiddle.net/xn4hzhts/

注意内容上的溢出。 允许它可滚动（因此内容可以在顶部和底部“下方”）。

<div class="top">This is your nav bar/header</div>
<div class="content">Put your pages' stuff here</div>
<div class="bottom">This is your footer</div>

.top
{
    position: absolute;
    top: 0em;
    left: 0em;
    right: 0em;
    height: 4em;
    background-color: #cccccc;
}

.content
{
    position: absolute;
    top: 4em;
    bottom: 4em;
    left: 0em;
    right: 0em;
    background-color: yellow;
    overflow: hidden;
    overflow-y: scroll;
}

.bottom
{
    position: absolute;
    bottom: 0em;
    left: 0em;
    right: 0em;
    height: 4em;
    background-color: #cccccc;
}