DIV與瀏覽器窗口一樣大，沒有javascript

我想創建一個與瀏覽器窗口一樣大的DIV，然後使用垂直滾動顯示網站。我要尋找的效果類似於一個在THIS PAGE（注意是一面大旗，始終是一樣大的瀏覽器窗口，並在底部的內容）：DIV與瀏覽器窗口一樣大，沒有javascript

有了這個HTML記：

<div class="banner"> 
    This banner is always big like the browser window 
</div> 

<div class="content"> 
    Content of the website 
</div>

這是做這件事：

.banner { 
position: absolute; 
top: 0px; 
right: 0px; 
bottom: 0px; 
left: 0px; 
background-color: red; 
} 

.content { 
width: 100%; 
position: relative; 
background-color: green; 
}

問題是，如果我使用絕對位置這個div我的網站開始從頁面頂部的內容，並通過隱藏的一面旗幟。

有什麼辦法可以在不使用javascript的情況下實現這個嗎？

在此先感謝

來源

2014-02-27 user3360873

爲什麼有'底部：在'.banner 0px' '？你不想讓它一路走到底部嗎？旗幟有多高？如果橫幅寬度爲50px，則可以將「margin-top：50px;」添加到「.content」中。 – Flux

@ user3360873我的答案是否滿足您的要求？如果您的問題已修復，請打勾接受:) –

解決方案：FIDDLE

CSS：

html,body { 
    height:100%; 
    margin:0; 
    padding:0; 
} 
.banner { 
    height:100%; 
    background-color: red; 
} 
.content { 
    background-color: green; 
}

說明：

關鍵是要得到適合總窗口大小的基本。您可以通過將<body>和<html>標籤設置爲100％高度（它們默認擴展總寬度）來獲得此基準。然後，他們擴展到父窗口的100％高度。

因此，您不需要絕對位置來調整像winow這樣的元素的大小。

您可以使用第一級兒童的100％高度（在您的情況.banner）使它們適合總窗高。您不必在大多數元素上設置100％的寬度，因爲它們會自動擴展整個寬度（像div這樣的塊元素不會浮動並處於相對或靜態位置）。

您的頁面將保持默認的定位和你.content DIV將開始走到窗下大小.banner

來源

2014-02-27 14:44:53

試試這個：

<style> 
.banner { 

background-color: red; 
margin: 0px 0px 0px 0px; 
padding: 0px; 
} 

.content { 
width: 100%; 
margin: 10px 0px 0px 0px; 
padding: 0px; 
background-color: green; 
height: 100%; 

} 
</style>

來源

2014-02-27 14:50:57 Aditi

DIV與瀏覽器窗口一樣大，沒有javascript

回答

相關問題