我在设置布局时遇到问题，因为我的一个子 div 超出了它的父 div。
我有: header 高度为 10%，容器高度为 90%，内部“div1”高度设置为 90%，边距顶部设置为 10%。如果我删除 margin-top 一切都可以，如果不是，它会超出创建滚动等的父级大小。(我想要设置 div1 高度，我不需要将高度设置为自动等)
JsFiddle:https://jsfiddle.net/5q9vh93n/
HTML:
<body>
<div id="header">Header</div>
<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
</div>
</body>
CSS:
body, html
{
color: white;
margin: 0px;
padding: 0px;
height: 100%;
}
#header
{
background-color: blue;
height: 10%;
}
#container
{
width: 100%;
height: 90%;
background-color: gray;
}
#div1 {
background-color: red;
float: left;
width: 15.67%;
margin-top: 10%;
margin-left: 1.5%;
height: 90%;
}
#div2 {
background-color: green;
float: right;
width: 100px;
width: 43.17%;
margin-right: 3.6%;
}
最佳答案
这里使用 Transform 是 demo
#div1 {
background-color: red;
float: left;
width: 15.67%;
transform: translateY(10%);
margin-left: 1.5%;
height: 90%;
}
关于html - CSS margin-top 使 div 超出父级的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30125405/