为什么最后一个元素页脚超过父级高度？

问题描述

| 为什么页脚元素原本应该是其父包装的高度的一小部分，却超出了其父包装的高度。

<!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>Slicing</title>

<style type=\"text/css\">
html,body{  
        margin:0px;
        padding:0px;
        width:100%;
        height:100%;

    }
div#wrapper{    
        margin:0px;
        padding:0px;
        width:100%;
        height:100%;
        line-height:normal;
        border:#C00 thick groove;
        background-color:#FF3;
    }

div#wrapper div#header{
        width:100%;
        height:30%;
        border:#F00 medium double;

    }


div#wrapper div#body{
        width:100%;
        height:50%;
        border:#F00 medium double;

    }

div#wrapper div#footer{
        width:100%;
        height:20%;
        border:#F00 medium double;

    }
</style>
</head>

<body>
<div id=\"wrapper\">
    <div id=\"header\">
        <div id=\"hlogo\">

        </div>
        <div id=\"hdesign\">

        </div>
        <div id=\"hTestimonial\">

        </div>
    </div>
    <div id=\"body\">
    </div>
    <div id=\"footer\">
    </div>
</div>
</body>
</html>

解决方法

您的ѭ1组合在一起会使它过高。 border不被视为height的一部分。请参阅盒子模型。您的每个ѭ1都在ѭ5左右，并且它的顶部和底部都在6px之间。您在三个相关元素上具有相同的border，因此\“ extra height \”的〜18px来自何处。您的页面：http：//jsbin.com/epodu5 完全相同，但删除了ѭ1，而另存了ѭ10：http：//jsbin.com/epodu5/2 如果您只关心现代浏览器（http://caniuse.com/#search=box-sizing），最简单的解决方法是使用CSS3的box-sizing: border-box：像这样：http://jsbin.com/epodu5/3 边框 width和height属性包括填充和边框，但是不是保证金。 , 父母用ѭ12

一个元素元素最后父级超过页脚页脚高度高度