Why do the last element footer exceed the parent height?
Why the footer element exceeds the height of its parent wrapper when it should have been a fraction of the height of its parent wrapper.
<!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>
开发者_Python百科<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>
Your borders are combining together to make it too high.
borders are not considered part of height. See the box model.
Each of your borders is around 3px, and it's on both the top and bottom, so that's 6px.
You have the same border on three relevant elements, so that's where the ~18px of "extra height" is coming from.
Your page: http://jsbin.com/epodu5
Exact same but with borders removed and different background-colors: http://jsbin.com/epodu5/2
If you only care about modern browsers (http://caniuse.com/#search=box-sizing), the easiest way to fix it is to use CSS3's box-sizing: border-box:
Like this: http://jsbin.com/epodu5/3
border-box
The width and height properties include the padding and border, but not the margin.
Use overflow:hidden for parent
加载中,请稍侯......
精彩评论