HTML高度100％的原因頁溢出

我試圖讓一個HTML頁面2周的div：「頂」和「主」HTML高度100％的原因頁溢出

頂部<div>必須考慮其所含元素的地方，主要<div>必須採取所有剩下的地方。

這裏是我的嘗試：

CSS代碼：

html,body{ 
    height:100%; 
} 

#top{ 
    background-color : red; 
    padding:10px; 
    border:1px solid; 
} 

#main{ 
    background-color : blue; 
    height:100%; 
    padding:10px; 
    border:1px solid; 
} 

#content1{ 
    background-color:yellow; 
} 

#content2{ 
    background-color:yellow; 
    height :100%; 
}

HTML代碼：

<!DOCTYPE html> 
<html> 
    <head></head> 
    <body> 

    <div id="top"> 
     <div id="content1">content1</div> 
    </div> 

    <div id="main"> 
     <div id="content2">content2</div> 
    </div> 

    </body> 

</html>

這裏是jsFiddle

爲y你可以看到，我在「content2」上設置的「100％」使得這個div佔據了頁面高度的100％，而不僅僅是剩餘的空間。有沒有一個神奇的CSS屬性來解決這個問題？

編輯：

感謝您對您所有的解決方案。

我最終選擇了由Riccardo Pasianotto根據CSS屬性display:table和display:table-row提出的解決方案。

這是我最後的HTML代碼：

<!DOCTYPE html> 
<body> 
    <div id="content1" class="row"> 
    <div class="subcontent"> 
     <div class="subContentContainer"> 
     content1 
     </div> 
    </div> 
    </div> 
    <div id="content2" class="row"> 
    <div class="subcontent"> 
     <div class="subContentContainer"> 
     content2 
     </div> 
    </div> 
    </div>  
</body>

以下是相應的CSS代碼：

html,body{ 
    padding:0; 
    margin:0; 
    height:100%; 
    width:100%; 
} 

body{ 
    display:table; 
} 

.row{ 
    display:table-row; 
    width:100%; 
} 

#top{ 
    height:100px; 
} 

#content1{ 
    background:#aa5555; 
    padding:10px; 
} 

#content2{ 
    background:#5555AA; 
    height:100%; 
} 

.subcontent{ 
    padding : 10px; 
    height:100%; 
} 

.subContentContainer{ 
    background-color:yellow; 
    height:100%; 
}

這裏是相應Jsfiddle。

來源

2013-06-25 Arnaud Denoyelle

爲什麼你想有你的主要內容堅守的底部？也許你想在頁面的底部有一個頁腳？ – Brewal

您錯過了HTML中的DOCTYPE。 – Uooo

稍後，我會在黃色區域周圍放置一個邊框。然後，如果主要內容的高度與區域一樣大，我會放置滾動條。對於用戶來說，我認爲如果這個區域的大小永遠不會改變，它就會更乾淨。 –

DEMOJF

這樣做，你必須使用display:table所以編輯以這種方式

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
body { 
 
    display: table; 
 
} 
 
.row { 
 
    display: table-row; 
 
    width: 100%; 
 
    background: red; 
 
} 
 
#top { 
 
    height: 100px; 
 
} 
 
#content1 { 
 
    background: yellow; 
 
    height: 100%; 
 
} 
 
#content2 { 
 
    overflow: scroll; 
 
    height: 100%; 
 
    border: 1px solid black; 
 
}

<body> 
 

 
    <div id="top" class="row"> 
 
    <div id="content1">content1</div> 
 
    </div> 
 

 
    <div id="main" class="row"> 
 
    <div id="content2">content2</div> 
 
    </div> 
 

 
</body>

來源

2013-06-25 09:00:12 rkpasia

從你的例子開始，我可以適應它做我想要的：http://jsfiddle.net/b2X4r/ –

當然！我沒有時間了！ – rkpasia

將其更新爲刪除標題的固定大小：http://jsfiddle.net/b2X4r/1/ –

試試這個：

http://jsfiddle.net/5cEdq/16/

CSS：

html,body{ 
     height:100%; 
     Padding:0; 
     margin:0; 
     border:0;}

來源

2013-06-25 08:35:28 falguni

我試過的兩款瀏覽器（Linux和Chrome上的FF）渲染效果不正確。您的瀏覽器是否正確？ –

不起作用：P –

@MrLister：對不起。我錯了。我厭倦了爲身體設置高度（我想用footer創建一個應用程序）。但現在我看到這個鏈接：http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height – Yogee

有一個神奇的CSS屬性來解決這個問題？

是的。它被稱爲box-sizing

閱讀this article瞭解更多關於箱子尺寸屬性的信息。

FIDDLE

所以，如果您的標題是說64PX高，那麼你會做這樣的事情：

.container { 
 
    height: 100%; 
 
    background: pink; 
 
    margin-top: -64px; 
 
    padding-top: 64px; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
}

<header>header</header> 
 
<div class="container"> 
 
    <div class="content"> 
 
    content here 
 
    </div> 
 
</div>

來源

2013-06-25 08:47:37 Danield

我經常做的是使容器沒有填充到min-height: 100%，讓我的內容有其適當的高度（自動）：

這將使這樣的事情：

#container { 
    background-color : #5555AA; 
    min-height: 100%; 
} 
#content2 { 
    background-color:yellow; 
    margin: 10px; 
}

http://jsfiddle.net/5cEdq/25/

我不知道這是否是你想要什麼，但你不能讓一個div只是「填補其剩餘的空間」，而不絕對是絕對的。你也不是很想要。

來源

2013-06-25 08:48:08 Brewal

有沒有更好的方式來做到這一點我猜。所以這可能是最好的解決方案。 –

由於這兩個Div都使用html和body標籤設置的100％高度，因此只需將其設置爲那裏，然後將您的邊距和填充值歸零。一般來說，如果你必須將div和它的父div都設置爲100％的高度，你就會過度使用它。

來源

2013-06-25 08:48:20 bitmapshades

HTML高度100％的原因頁溢出

回答

相關問題