gpt4 book ai didi

html - 为什么最后一个元素的 footer 超过了父元素的高度?

转载 作者:太空宇宙 更新时间:2023-11-03 22:05:59 24 4
gpt4 key购买 nike

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

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

最佳答案

您的边框组合在一起使其过高。

border 不被视为 height 的一部分。参见 the box model .

您的每个 border 都在 3px 左右,它在顶部和底部,所以是 6px

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

您的页面:http://jsbin.com/epodu5
完全相同,但删除了 border 和不同的 background-color:http://jsbin.com/epodu5/2

如果您只关心现代浏览器 ( http://caniuse.com/#search=box-sizing ),最简单的修复方法是使用 CSS3 的 box-sizing: border-box :

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

border-box

The width and height properties include the padding and border, but not the margin.

关于html - 为什么最后一个元素的 footer 超过了父元素的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6177313/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com