div填充屏幕高度的100％以上

我的頁面頂部有一個133像素高的標題欄。我將身體設置爲位置：絕對和身高：100％。div填充屏幕高度的100％以上

我現在有兩個div以下定位。我將這些設置爲相對高度100％的位置，現在它從我的頁面底部延伸133像素。如果我刪除頂部的酒吧，高度是完美的 - 但頂部酒吧推100％到100％+ 133px。

<!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; 
    } 
    div#god { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
    } 
    div#topbar { 
     position: relative; 
     top: 0px; 
     left: 0px; 
     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 { 
     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#body { 
     position: relative; 
     height: 100%; 
    } 
    div#sidebar { 
     width: 300px; 
     float: right; 
     background-color: #EFEFEF; 
     height: 100%; 
    } 
    div#content { 
     height: 100%; 
     overflow: hidden; 
     background-color: #FEFEFE; 
    } 
    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="god"> 
    <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="body"> 
    <div id="sidebar"> 
     &nbsp;afasdfadsfadf 
    </div> 
    <div id="content"> 
     &nbsp;fdsafdasdfa 
    </div> 
    </div> 
</div> 
</body> 
</html>

來源

2012-11-29 agent154

使頂欄絕對，太：

div#topbar { 
    position: absolute; 
    z-index: 1; 
}

並添加包裝的div爲您的內容和側邊欄有邊距：

<style> 
    div.topbar-padding { 
     margin-top: 133px; 
    } 
</style>  
<div id="body"> 
    <div id="sidebar"> 
     <div class="topbar-padding"> 
      &nbsp;afasdfadsfadf 
     </div> 
    </div> 
    <div id="content"> 
     <div class="topbar-padding"> 
      &nbsp;afasdfadsfadf 
     </div> 
    </div> 
    </div>

來源

2012-11-29 18:28:21 Max

Topbar也應該是絕對的。

div#topbar { 
    position:absolute; 
    z-index:2; 
}

來源

2012-11-29 18:06:18 ignacioricci

這做到了。非常感謝你。 – agent154

其實......這種固定它，但現在我下面的兩個div在高度0開始。所以我在那裏的任何文本都在頂欄後面。 – agent154

是的，這是可以發生的。您必須將列內的元素設置爲填充頂部，以便它們不會保留在頂部條的下方。 – ignacioricci

div填充屏幕高度的100％以上

回答

相關問題