使 HTML 元素填充页面的其余部分答案

【问题标题】：Make HTML element fill rest of page使 HTML 元素填充页面的其余部分
【发布时间】：2014-01-07 07:33:02
【问题描述】：

我有以下 HTML。

<body>
    <nav>..</nav>
    <div class='container'>
        <div class='row' id='header'>
            ...
        </div>
        <div class='row' id='content'>
            ...
        </div>
    </div>
</body>

我的目标是让header 保持恒定的高度，而content 填充页面的其余部分（我在那里有一个Highchart）。我尝试在这里使用信息：how do I give a div a responsive height 和这里：http://codethatworks.blogspot.co.uk/2012/05/responsive-full-height-columns-using.html 和这里 Make a div fill the height of the remaining screen space - 但没有运气。

我的基本理解是我将身体高度设置为100%，将header 高度设置为25%，将content 设置为75%。 nav 是不是在这里混淆了？

请注意，我使用的是 Bootstrap 3。

【问题讨论】：

<nav> 应该去哪里？我的意思是，如果标题为 25%，内容为 75%，您希望导航适合哪里？

标签： javascript html css highcharts

【解决方案1】：

您需要设置为 100% 高度的不仅仅是 body，而是这两个“行”的所有父项。所以在你的情况下，html, body, .container。

html, body {
  height: 100%;
}

body > .container {
  height: 100%;
}

nav {
  position: absolute;
  top: 50px;
}

#header {
  height: 25%;
  background: yellow;
}

#content {
  height: 75%;
  background: red;
}

如果您没有将nav 设置为绝对定位，那么它会在向下推动内容并使总高度超过 100% 时产生滚动条。

Demo here!

【讨论】：

【解决方案2】：

您可以使用视口百分比。请参阅this fiddle

相关行：

#header
{        
    height: 25vh;
    ...
}

#content
{    
    height:75vh;
    ...
}

在这种情况下，您不必设置 body、html 等的高度。如果您希望它在没有填充的情况下填充页面，您可以添加：

body
{
    padding:0px;
    margin:0px;    
}

请参阅支持here。

更多详情请见this answer。

对于nav 元素，您要么需要按照其他答案中的建议使其绝对定位，要么放弃一定比例的页面用于导航。例如。使content高度65vh和nav高度10vh。

【讨论】：