窗口div超出頁腳

我一直在試圖使我的網站有一個甚至利潤率的包裝，但底部邊距總是太大。爲了隔離這個問題，我註釋掉了html中的所有div內容，並註釋掉了與基本div無關的所有css選擇器，而窗口div仍然會通過頁腳。窗口div超出頁腳

這是css，你會注意到一些css屬性以s開頭拼寫錯誤。不要擔心這些，這只是我註釋掉css屬性的快捷方式。

.window { 
    width: 88%; 
    height: 99%; 
    smargin-top: 3%; 
    smin-height: 800px; 
    margin-left: 7%; 
    sbox-shadow: 0px 0px 10px 1px #000000; 
    min-width: 1110px; 
    background-color: #FF0000; 
} 
.header { 
    height: 15%; 
    width: 100%; 
    background-color: #DDDDDD; 
    padding-top: 1%; 
    smin-height: 100px; 
} 
.nav { 
    font-size: 20px; 
    spadding-top: 1%; 
    height: 5%; 
    width: 100%; 
    background-color: #999999; 
    font-family: Tahoma, Geneva, sans-serif; 
    smin-height: 35px; 
    max-height: 40px; 
} 
.content { 
    height: 60%; 
    width: 100%; 
    smin-height: 350px; 
    : ; 
    spadding-top: 3%; 
    background-color: #FFFFFF; 
} 
.footer { 
    font-family: Arial, Helvetica, sans-serif; 
    height: 5%; 
    width: 100%; 
    background-color: #DDDDDD; 
    smin-height: 30px; 
}

這裏是html，我排除了所有註釋掉的內容，所以問題將從它的基本基礎結構中分離出來。

<!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> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Excercise 2 CSS</title> 
</head> 

<body> 
    <div class="window"> 
      <div class="header"> 

      </div> 
      <div class="nav"> 

      </div> 
      <div class="content"> 

      </div> 
      <div class="footer"> 

      </div> 
     </div> 
</body> 
</html>

來源

2012-09-19 DrinkJavaCodeJava

你面對問題在一些特定的瀏覽器..？ –

你的意思是「底部邊距總是太大」？您是否指腳註下方的保證金？或之前的頁腳和容器之間的邊距？ –

您的添加是錯誤的。在你的CSS中，你的高度如下：標題15％，導航5％，內容60％和頁腳5％，只有加在一起才能達到85％。我不確定填充會如何影響這樣的佈局，但是如果應用框大小：border-box;您的div，填充不會影響整體規模（將相減的工作，而不是相加）

修正代碼如下（雖然我去掉了其他大多數的CSS）

html, body 
{ 
    height: 100%; 
} 

.window { 
    height: 100%; 
    width: 100%; 
    background-color: #FF0000; 
} 
.header { 
    height: 15%; 
    background-color: #DDDDDD; 
} 
.nav { 
    height: 5%; 
    background-color: #999999; 
} 
.content { 
    height: 75%; 
    background-color: #FFFFFF; 
} 
.footer { 
    height: 5%; 
    background-color: #DDDDDD; 
}

來源

2012-09-19 20:06:28

幾乎可以工作，唯一的問題是我無法在右側獲得包裝。但是，我把不合格的寬度設置爲95％，並從中減去5。我會讓你知道這是如何解決的。 – DrinkJavaCodeJava

請讓我知道你是否解決了這個問題，或者你的95％寬度測試的結果是什麼。 –

窗口div超出頁腳

回答

相關問題