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

我有以下的HTML。使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在这里混淆了什么？

请注意，我用的引导3.

来源

2014-01-06 iamyojimbo

我们可以看到你的CSS吗？ – JeroenJK

您可以使用视率。见this fiddle

相关线路：

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

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

在这种情况下，你不必设置身体，html等的高度，如果你想它来填充网页没有填充您会增加：

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

查看支持here。

有关更多详细信息，请参见this answer。

对于nav元素，您可能需要按照其他答案中的建议完全放置该元素，或放弃导航页面的某个百分比。例如。使content高度65vh和nav高度10vh。

来源

2014-01-06 23:13:57 acarlon

这不仅是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!

来源

2014-01-06 23:19:00 davidpauljunior

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

回答

相关问题