为什么子div扩展超出其父div？ [英] Why do child divs extend beyond their parent div?
问题描述
我觉得愚蠢的问这个，但这是一个非常简单的问题，不明白如何解决。在下面的代码中，为什么container，main和secondary div扩展超出头？我明白这是因为我已经分配给容器的填充，但我已经分配了一个最大宽度到html元素。头元素遵守最大宽度，但容器和它的子div不是。我在这里看过类似的问题，但没有看到我认为与我的特定情况有关的任何东西。这是怎么回事？
谢谢。
test.html
<！DOCTYPE html>
< html>
< head>
< meta charset =UTF-8>
< title> Test< / title>
< link rel =stylesheethref =../ reset.css/>
< style type =text / css>
html {
max-width：960px;
margin：0 auto;
position：relative;
}
header {
height：2.5em;
background：＃2a3744;
color：#fff;
}
body {
font-size：100％;
-moz-box-sizing：border-box;
-webkit-box-sizing：border-box;
box-sizing：border-box;
}
.container {
width：100％;
padding：1em;
margin：0 auto;
background：#ccc;
}
.main {background：＃cf6; }
.secondary {background：＃fc6; }
< / style>
< / head>
< body>
< header role =banner>
header
< / header>
< div class =container>
< div class =main>
main
< / div>
< div class =secondary>
secondary
< / div>
< / div>
< / body>
< / html>
解决方案 padding：1em 与 width：100％一起使得实际宽度 100％+ 2em 。
您应该添加 box-sizing：border-box; 到 .cointainer 以确保宽度为100％（示例）。
I feel stupid asking this but this is a very simple problem that don't understand how to solve. In the code below, why are the container, main, and secondary divs extending beyond the header? I understand that it's occurring because of the padding I've assigned to the container but I've assigned a max-width to the html element. The header element is obeying that maximum width but the container and its child divs aren't. I've looked at similar questions here but didn't see anything that I thought pertained to my particular situation. What's going on here?
Thanks.
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="../reset.css" />
<style type="text/css">
html {
max-width: 960px;
margin: 0 auto;
position: relative;
}
header {
height: 2.5em;
background: #2a3744;
color: #fff;
}
body {
font-size: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 100%;
padding: 1em;
margin: 0 auto;
background: #ccc;
}
.main { background: #cf6; }
.secondary { background: #fc6; }
</style>
</head>
<body>
<header role="banner">
header
</header>
<div class="container">
<div class="main">
main
</div>
<div class="secondary">
secondary
</div>
</div>
</body>
</html>
解决方案 The padding: 1em on the container together with the width:100% makes the actual width 100% + 2em.
You should add box-sizing: border-box; to .cointainer to make sure that the width is 100% (example).
这篇关于为什么子div扩展超出其父div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
