無法獲得div爲100％高度

我已經在線嘗試了幾個建議，使得我的html和body標籤具有100％的高度以及100％的最小高度。我已經將div標記設置爲相同。它只是不擴展到屏幕的底部。無法獲得div爲100％高度

此外，我無法獲得第二個浮動div來填充未被其他div旁邊填充的空間的100％。它只會填充屏幕的100％（在其他較小的div下面）或足夠允許文本。

我猜應該指出的是，我試圖查看在IE9和火狐16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style type="text/css"> 
    body { 
     margin: 0px; 
     padding: 0px; 
     height: 100%; 
     min-height: 100%; 
     overflow:hidden; 
    } 
    div#topbar { 
     width: 100%; 
     height:133px; 
     background-image :url(bkgnd_header_tile.jpg); 
    } 
    div#logo { 
     width: 187px; 
     height: 133px; 
     background-image:url('headerlogo_home.jpg'); 
     float: left; 
    } 
    div#text { 
     width: 1; 
     height: 133px; 
     float: right; 
    } 
    div#campuses { 
     height: 68px; 
     padding-top: 10px; 
     color: White; 
     text-align: right; 
    } 
    div#title { 
     height: 41px; 
     color: White; 
     text-align: right; 
     padding-top: 14px; 
    } 
    div#sidebar { 
     height: 100%; 
     width: 250px; 
     float: right; 
     background-color: Black; 
    } 
    div#body { 
     height: 100%; 
     width: 100% 
     float: right; 
     font-family: Segoe UI; 
    } 
    span.text { 
     padding-left: 15px; 
     padding-right: 15px; 
     font-family: Sans-Serif; 
     font-size: small; 
    } 
    span.name { 
     padding-left: 15px; 
     padding-right: 15px; 
     font-family: Sans-Serif; 
     font-size: x-large; 
    } 
    </style> 
</head> 
<body> 
    <div id="topbar"> 
    <div id="logo"></div> 
    <div id="text"> 
     <div id="campuses"> 
     <span class="text">St. John's Campus</span> 
     <span class="text">Grenfell Campus</span> 
     <span class="text">Marine Institute</span> 
     <span class="text">Harlow Campus</span> 
     <span class="text">Distance Education</span> 
     </div> 
     <div id="title"><span class="name">Memorial Self Service</span></div> 
    </div> 
    </div> 
    <div id="sidebar"> 

    </div> 
    <div id="body"> 
    asdf</div> 
</body> 
</html>

來源

2012-11-29 agent154

我們也需要HTML。 – sp00m

如果我們能夠看到HTML，那麼這將會更容易。 –

@ sp00m我添加了HTML。 – agent154

基本上，遵循拉文德拉的建議，並且修改一下，我得到了這個工作。我定身與下面的樣式設置

body { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
}

，並利用這些對於我的兩個DIV部分：

div#body { 
    position: relative; 
    height: 100%; 
    overflow:scroll; 
} 

div#sidebar { 
    position: fixed; 
    background-color : #EFEFEF; 
    height: 100%; 
    width: 300px; 
    overflow: hidden; 
} 

div#content { 
    height: 100%; 
    float: left; 
    margin-left: 300px;

<div id="body"></div>是其他兩個div的父容器，ID =「側邊欄」和id = 「內容」。我這樣做是因爲我在自己的「身體」div上方有一個133px高的頂欄。

來源

2012-12-08 03:40:17 agent154

設置position:relative身體將身體的高度考慮和舒展沿身體完全
注意絕對定位的內容以百分比指定高度屬性與在包含塊的尊重計算

，或者您也可以嘗試在overflow:hidden; body標籤

來源

2012-11-29 16:43:20

這也沒有幫助。我發佈了HTML，看看能否幫助你。 – agent154

我會嘗試設置位置爲絕對一如既往，我有這種奇怪的行爲，絕對來救援，最重要的是，我也會設置左和頂0

來源

2012-11-29 17:01:20

解決了左邊div的問題，但我無法讓它在右邊的div上工作 - 我有一個邊欄也需要擴展到屏幕的底部。如果我將它設置爲position：absolute，它會移動到窗口的左側。 – agent154

試圖定義右：0px到那個正確的div而不是左側，絕對 –

無法獲得div爲100％高度

回答

相關問題