Question

我有以下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。

Answer 1

这不仅仅是body你需要设置为100％的高度，它是这两个'行'的所有父母。所以在你的情况下，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!

Answer 2

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

相关专栏：

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

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

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

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

请参阅支持here。

有关详细信息，请参阅this answer。

对于nav元素，您需要按照其他答案中的建议将其置于绝对位置，或者放弃导航页面的某个百分比。例如。 content身高65vh和nav身高10vh。

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

2 个答案: