使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元素填充頁面的其餘部分

回答

相關問題