Question

我正在尝试再次刷新我的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上，请参见此处由红色边框表示底部... div too tall 我哪里错了？我确信这很简单。

Answer 1

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

enter image description here

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

此外，你不必使用position: absolute;，你是绝对的，只是为了避免滚动，但这是一个错误的方法。绝对元素不在文档流程中，如果没有包含在position: relative;元素内，则会产生奇怪的结果。

Demo

几点提示：

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

垂直使用100％是非常罕见的，设计人员通常使用width: 100%;来使布局响应。因此，如果您没有任何具体原因可以选择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;的边框，但是，窗口将不会得到滚动条作为边界在元素内计算，而不是在外面。

Answer 2

你的代码有很多东西，但是直截了当的答案是边框是盒子模型的一部分，因此是高度计算的一部分。因此div的高度是高度的15％+边界的宽度，因此它的尺寸过大。

请参阅盒子模型的这个解释：

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

Answer 3

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

Answer 4

从：#BottomBar中删除“Position：absolute”。这应该可以解决问题。

HTML div高度大于预期

4 个答案: