Css HTML div高度大于预期值_Css_Html_Height

Css HTML div高度大于预期值

css html

Css HTML div高度大于预期值,css,html,height,Css,Html,Height,我试图再次复习我的HTML和CSS，我试图做一个简单的布局。这是我的简单站点的HTML/CSS <!DOCTYPE html> <HTML> <HEAD> <TITLE>My website</TITLE> <META CHARSET="UTF-8"> <style type="text/css"> * { padding: 0px; margin: 0p

我试图再次复习我的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>


我的网站
* {
填充：0px；
保证金：0px
}
html，正文{
保证金：0；
填充：0；
身高：100%；
边界：0px；
}
#顶栏{
宽度：100%；
身高：15%；
边框底部：5px实心；
边框颜色：#B30000；
}
#中栏{
背景色：黑色；
身高：70%；
宽度：70%；
左边距：自动；
右边距：自动；
}
#底线{
位置：绝对位置；
底部：0；
宽度：100%；
身高：15%；
边框顶部：5px实心；
边框颜色：#B30000；
}
h1{
字体系列：无衬线；
字号：24pt；
}
#标题{
文本对齐：居中；
}
李{
显示：内联；
}
#版权所有{
文本对齐：居中；
}
我的网站






测试
此处命名并复制；

考虑到我对div元素应用的高度，我希望所有元素都能很好地对齐，但是底部div似乎高于预期的15%，并与中间div重叠，请参见下面的红色边框演示。。。

我哪里做错了？我相信这很简单。

您的代码中有很多地方有点不对劲，但直截了当的回答是边框是长方体模型的一部分，因此是高度计算的一部分。因此，您的div的高度是高度的15%+边框的宽度，因此它是超大的

请参见以下关于盒子模型的说明：

您的代码中有很多地方有点不对劲，但直截了当的答案是边框是长方体模型的一部分，因此是高度计算的一部分。因此，您的div的高度是高度的15%+边框的宽度，因此它是超大的

请参见以下关于盒子模型的说明：

我认为这与你的边界有关（每个边界都是5px）。由于顶部栏、中间栏和底部栏的百分比高度加起来为%100，并带有额外的边框，因此存在有效高度大于%100的问题，并且，由于底部栏在底部具有绝对位置，因此不会强制页面滚动，但是simple会在中横杆和下横杆div之间产生一些重叠

您应该了解盒子模型是如何工作的。。。您使用的边框是在元素外部计算的，因此，例如，如果元素的高度为

200px

，且边框为5px，则元素的总大小将为

210px

因此，考虑到这一概念，您所拥有的元素总计为100%
，并且您也在使用边框，因此超出了视口，这将导致垂直滚动
此外，您不必使用position:absolute，您将其设置为绝对值，只是为了避免滚动，但这是一种错误的方法。绝对元素不在文档流中，如果您没有包装在位置：relative中，它将给出奇怪的结果元素

几点提示：

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

使用100%垂直是非常罕见的，设计师通常使用宽度：100%用于使布局响应。因此，如果您没有任何特定的理由选择100%
垂直元素，就不要选择它

解决方案：
不过，如果您想坚持垂直布局，使其高度达到100%，则应使用框大小：边框框属性
在这里，box size可以做什么？
好的，使用上面的属性，它将更改长方体模型的默认行为，因此它将不计算元素外部的边框、填充等，而是计算元素内部的边框、填充等，从而防止视口被滚动
我会给你举个例子，这是我为你做的
（更新，忘记了规范CSS）
对上面演示的解释，如果你看一下CSS，我正在使用
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

这将使每个元素的填充、边框等在元素内部而不是外部计数，如果您标记，am使用5px的边框但是，窗口不会得到滚动条，因为边框是在元素内部计数的，而不是在元素外部。
您应该了解长方体模型是如何工作的。。。您使用的边框是在元素外部计算的，因此，例如，如果元素的高度为200px
，且边框为5px，则元素的总大小将为210px

因此，考虑到这一概念，您所拥有的元素总计为100%
，并且您也在使用边框，因此超出了视口，这将导致垂直滚动
此外，您不必使用position:absolute，您将其设置为绝对值，只是为了避免滚动，但这是一种错误的方法。绝对元素不在文档流中，如果您没有包装在位置：relative中，它将给出奇怪的结果元素

几点提示：

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

使用100%verti