使子元素100％身體的身體元素也是100％

我試圖使<body>元素佔據至少瀏覽器窗口的100％高度，但也擴大到任何內容。我還試圖使其僅有的<div>子元素佔據<body>高度的100％。使子元素100％身體的身體元素也是100％

插圖

這就是目前發生的事情;案例A是問題，案例B按預期工作。

在案例一中，div.page-content（紅色框）應擴大到body（藍框），但事實並非如此。

代碼

這裏是我的。

CSS

html { 
    height: 100%; 
} 

body { 
    min-height: 100%; 
    padding-top: 57px; 
} 

.page-content { 
    height: 100%; 
}

的Html

<html> 
    <body> 
    <nav class="navbar navbar-inverse navbar-fixed-top"></nav> 
    <div class="page-content"> 
     <div class="page-container"></div> 
    </div> 
    </body> 
</html>

注意，nav元件被靜態定位，因此不會影響佈局。

身體沒有指定height，因爲我想身高爲auto，所以它延伸至內容，但我不希望身高低於瀏覽器窗口。

身體的行爲如預期，它是div.page-content，它只調整自己的內容，而不是拉伸到body的高度。

有沒有一種方法來實現所需的行爲，而無需使用JavaScript？

來源

2016-04-28 Slight

保持'body'到'高度：100％;' –

^AKA變化'分鐘-height'在'body'到'height'。 – TylerH

不太確定你在尋找什麼，也許會將溢出移動到身體？ http://codepen.io/gc-nomade/pen/LNgLjW –

添加overflow:visible;到body，改變min-height:100%;到height:100%;爲body和height:100%;到min-height:100%;爲.page-content

來源

2016-04-28 14:50:56 Johannes

雖然此解決方案導致案例B失敗，身體不會延伸以滿足內容（由於身高'：100％'），我接受它，因爲它通常適用於我的目的，我真的只想'div.page-content'的大小適當; body可以做任何事情。在'.page-content上使用'min-height：100％'' '是訣竅，謝謝。 – Slight

跳過page-content和使用body作爲主容器，所以你跳過你所面臨的繼承的麻煩。

例如

* { 
 
    box-sizing: border-box 
 
} 
 
html { 
 
    padding-top: 50px; 
 
    height: 100%; 
 
    background: white; 
 
} 
 
body { 
 
    min-height: 100%; 
 
    background: turquoise; 
 
    margin: 0 2em; 
 
    border:solid; /* see me */ 
 
} 
 
nav { 
 
    position: fixed; 
 
    height: 50px; 
 
    top: 0; 
 
    left: 2em; 
 
    right: 2em; 
 
    background: tomato; 
 
}

<nav class="navbar navbar-inverse navbar-fixed-top"></nav> 
 
<div class="page-container"></div>

來源

2016-04-28 15:21:51

使子元素100％身體的身體元素也是100％

回答

相關問題