Question

为什么页脚元素超出其父包装器的高度时，它应该是其父包装器高度的一小部分。

<!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>

Answer 1

你的border正在组合在一起使其过高。

border不被视为height的一部分。请参阅the box model。

您的每个border都在3px左右，它位于顶部和底部，因此6px。

你在三个相关元素上有相同的border，所以这就是“额外高度”的〜18px的来源。

您的信息页：http://jsbin.com/epodu5
完全相同但删除了border且不同background-color s：http://jsbin.com/epodu5/2

如果您只关心现代浏览器（http://caniuse.com/#search=box-sizing），最简单的解决方法是使用CSS3的box-sizing: border-box：

像这样：http://jsbin.com/epodu5/3

边界框

width和height属性包括填充和边框，但是   不是保证金。

Answer 2

将overflow:hidden用于父级

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

2 个答案: