HTML div 高度大于预期答案

【问题标题】：HTML div height greater than intendedHTML div 高度大于预期
【发布时间】：2013-07-25 01:12:27
【问题描述】：

我正在尝试重新学习我的 HTML 和 CSS，并且我正在尝试制作一个简单的布局。这是我的简单网站的 HTML/CSS。

<!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 重叠，请参见此处的红色边框所示底部... 我哪里错了？我敢肯定这很简单。

【问题讨论】：

我建议阅读编码约定：stackoverflow.com/questions/428431/…。 HTML标签名和属性一般都是小写的，类名和ID名也一般都以小写字母开头。
另外请参阅这个问题，了解为什么不应该使用 *{} 作为重置。 stackoverflow.com/questions/1714096/…。我将从 Eric Meyer 的重置开始：meyerweb.com/eric/tools/css/reset/
哎呀，看来我还有很多东西要学..
这些主要是最佳实践问题，因此不应该让您的代码无法正常工作。只是想我也应该指出它，因为你才刚刚开始:)

标签： css html height

【解决方案1】：

您应该了解盒子模型的工作原理...您正在使用元素之外的边框，例如，如果您的元素高度为 200px，并且边框为 5px，则总元素大小将为210px;

所以考虑到这个概念，你所拥有的元素总和为100%，并且你也在使用边框，所以这超出了视口，这将导致垂直滚动......

您也不必使用position: absolute;，您将其设为绝对，只是为了避免滚动，但这是错误的方法。绝对元素不在文档流中，如果您没有包裹在 position: relative; 元素中，将会产生奇怪的结果。

Demo

小贴士：

使用小写标签
除非需要，否则避免使用大写 ID

垂直使用 100% 是非常罕见的，设计师通常使用width: 100%; 来使布局具有响应性。因此，如果您没有任何特定理由选择 100% 垂直元素，请不要选择它..

解决方案：

如果你想坚持垂直布局跨越到 100% 的高度，你应该使用box-sizing: border-box; 属性...

box-sizing 会在这里做什么？好吧，使用上面的属性，它会改变盒子模型的默认行为，所以不是计算元素外部的边框、填充等，而是计算元素内部，因此它会阻止视口滚动。

我将为您提供一个我为another answer 制作的示例。

Demo 2（已更新，忘记标准化 CSS）

上面demo的解释，如果你看CSS，我在用

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

这将使每个元素的填充、边框等都被计算在元素内部而不是外部，如果你标记，我使用5px; 的边框，但窗口不会得到滚动条，因为边框是计算在元素内部而不是外部。

【讨论】：

感谢您的详尽解释，我用于 notepad++ 的自动缩进插件出于某种奇怪的原因将所有标签都切换为大写，但我会坚持使用小写的 ID未来。
如果我不使用百分比来定义高度，那么确定 div 元素高度的最佳方法是什么？
@BML91 你有什么具体的理由来100% 垂直地总结元素吗？如果不是，那么就让元素正常流动……
我希望顶部和底部 div 的高度相等，这样看起来更均匀，并且在中心 div 中有照片/幻灯片。..
是的，感谢您的详尽回答，非常感谢。现在回到修修补补。

【解决方案2】：

您的代码有很多问题，但直截了当的答案是边框是框模型的一部分，因此是高度计算的一部分。所以你的 div 的高度是高度的 15% + 边框的宽度，因此它是超大的。

请看这个盒子模型的解释：

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

【讨论】：

【解决方案3】：

我认为这与您的边框有关（每个边框都是 5 像素）。由于您的 TopBar、MidBar 和 BottomBar 的百分比高度加起来为 %100，加上额外的边框，您会遇到有效高度大于 %100 的问题，然后，因为您的 BottomBar 具有绝对位置在底部，它不会强制页面滚动，但简单会在 MidBar 和 BotomBar div 之间引起一些重叠。

【讨论】：

【解决方案4】：

从#BottomBar 中删除“位置：绝对”。这应该可以解决问题。

【讨论】：