HTML div高度大於預期值

我試圖再次刷新我的HTML和CSS，並試圖做出簡單的佈局。這是我的簡單網站的HTML/CSS。HTML div高度大於預期值

<!DOCTYPE html> 
<HTML> 
<HEAD> 
    <TITLE>My website</TITLE> 
    <META CHARSET="UTF-8"> 
<style type="text/css"> 
    * { 
     padding: 0px; 
     margin: 0px 
    } 

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

    #TopBar { 
     width:100%; 
     height:15%; 
     border-bottom:5px solid; 
     border-color:#B30000; 
    } 

    #MidBar { 
     background-color:black; 
     height:70%; 
     width:70%; 
     margin-left:auto; 
     margin-right:auto; 
    } 

    #BottomBar { 
     position:absolute; 
     bottom:0; 
     width:100%; 
     height:15%; 
     border-top:5px solid; 
     border-color:#B30000; 
    } 

    h1 { 
     font-family: sans-serif; 
     font-size: 24pt; 
    } 

    #HEADER { 
     text-align:center; 
    } 

    li { 
     display:inline; 
    } 

    #copyright { 
     text-align: center; 
    } 
</style> 
</HEAD> 

<BODY> 

<DIV ID="TopBar"> 
<DIV ID="HEADER"> 
    <HEADER> 
    <H1>My website</H1> 
    <NAV> 
    <UL> 
     <LI><A HREF="./about/index.html">About me</A> 
     <LI><A HREF="./contact/index.html">Contact me</A> 
     <LI><A HREF="http://throughbenslens.co.uk/blog">My blog</A> 
     <LI><A HREF="./portfolio/index.html">My portfolio</A> 
    </UL> 
    </NAV> 
    </HEADER> 
</DIV> 
</DIV> 

<DIV ID="MidBar"> 
<DIV ID="PhotoSlideshow"> 
test 
</DIV> 
</DIV> 


<DIV ID="BottomBar"> 
<FOOTER> 
<P ID="copyright">Name here &copy; 
<?PHP DATE("Y") ECHO ?> </P> 
</FOOTER> 
</DIV> 

</BODY> 
</HTML>

鑑於我已經應用到我的div元素我希望一切都來排隊很好但是似乎底部DIV比預期高15％，並覆蓋到中間DIV的高度，看到這裏的證明在底部的紅色邊框... div too tall 我哪裏錯了？我相信這很簡單。

來源

2013-07-24 BML91

我建議閱讀編碼約定：http://stackoverflow.com/questions/428431/are-there-any-html-coding-conventions-style-standard。 HTML標籤名稱和屬性通常是小寫字母，而類別和ID名稱通常也以小寫字母開頭。 – quoo

另請查看這個問題，爲什麼你不應該使用* {}作爲重置。 http://stackoverflow.com/questions/1714096/why-is-the-css-star-selector-considered-harmful。我開始與埃裏克邁耶的重置：meyerweb.com/eric/tools/css/reset/ – quoo

哎呀，這似乎我仍然有很多要學習然後.. – BML91

您應該瞭解箱體模型的工作原理......您正在使用的邊框數量超出了元素的範圍，例如，如果您的元素高度爲200px，並且邊框爲5px，則總元素大小爲210px;

enter image description here

因此，考慮以此爲概念，你有什麼樣的元素，其總計爲100%，並且您使用的邊框也使得超過視這將導致垂直滾動...

你也不必使用position: absolute;，你是絕對的，只是爲了避免卷軸，但這是一個錯誤的方法。絕對元素超出了文檔流程，並且如果您沒有包含在position: relative;元素中，會產生奇怪的結果。

Demo

一些提示：

使用小寫標籤
避免大寫的ID，除非需要

使用100％上下是非常罕見的，設計師通常使用用於金屬的width: 100%; g佈局響應。所以，如果你沒有任何特別的理由去爲100%垂直元素，不要去了..

解決方案：

不過，如果你想堅持的垂直佈局跨越到100％的身高，你應該使用box-sizing: border-box;屬性... ... -

什麼box-sizing會在這裏做？好吧，使用上面的屬性，它會改變盒子模型的默認行爲，所以不是在元素外面計算邊框，填充等，而是在它內部計數，因此它會阻止視口滾動。

我會爲你提供一個例子，我已經爲another answer做了一個例子。

Demo 2（更新，已經忘了標準化CSS）

解釋上面的演示，如果你看一下CSS，我使用

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

這將使每一個元素內邊距，邊框等等在元素內部而不是外部，如果你標記，我使用5px;的邊界，並且仍然不會得到滾動條，因爲邊界在元素內部而不是外部。

來源

2013-07-24 16:50:12

感謝您的詳細解釋，我用於記事本++的自動縮進插件將所有標記切換爲大寫，出於某種奇怪的原因，但我將來會堅持使用小寫的ID。 – BML91

@ BML91歡迎:) –

如果我沒有使用百分比定義高度，那麼確定div元素高度的最佳方法是什麼，以便它們看起來不錯，甚至？ – BML91

你的代碼有很多東西有點不對，但直接的答案是邊框是盒子模型的一部分，因此是高度計算的一部分。所以你的div的高度是高度的15％+你的邊框的寬度，因此它是超大的。

請看盒模型的這樣的解釋：

http://css-tricks.com/the-css-box-model/

來源

2013-07-24 16:46:30 quoo

我認爲這與你的邊框做的（各爲5像素）。由於您的TopBar，MidBar和BottomBar的百分比高度合計爲100％，因此如果您有額外的邊框，則您有一個有效高度大於％100的問題，並且因爲您的BottomBar具有絕對位置在底部，它不會強制頁面滾動，但簡單地導致了MidBar和BotomBar div之間的一些重疊。

來源

2013-07-24 16:48:04

從#BottomBar中刪除「Position：absolute」。這應該夠了吧。

來源

2013-07-24 16:51:40 Lance

HTML div高度大於預期值

回答

相關問題