Html 子div扩展出父div问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12721605/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
child div expanding out of parent div issue
提问by Ajinx999
I want something like this, click here.
我想要这样的东西，点击这里。
This is a simple code in my HTML:
这是我的 HTML 中的一个简单代码：
#mainContent {
margin:0;
width:100%;
height:600px;
padding: 0 0 30px 0;
}
#mainContent #sidebar { /* sidebar inside #mainContent */
float:left;
width:220px;
height:560px;
margin:10px 10px 40px 10px;
padding:10px 5px 10px 5px;
background-color:#CCCCCC;
}
#mainContent #featContent {
height:560px;
margin:10px 10px 40px 260px;
padding:10px 5px 10px 5px;
background-color:#CCCCCC;
overflow:auto;
} <div id="mainContent">
<div id="sidebar"></div>
<div id="featContent"></div>
</div>
The problem is one of the divs are improperly placed .The #featContent div is going out of its parent #mainContent div for reason I don't understand. Check out this in jsFiddle here. The margin of #featContent goes out of the #mainContent bounds.
问题是其中一个 div 放置不当。#featContent div 由于我不明白的原因从其父级 #mainContent div 中脱离出来。看看这个中的jsfiddle这里。#featContent 的边距超出 #mainContent 边界。
采纳答案by Rohit Azad
回答by Sowmya
Add padding to parent div
将填充添加到父 div
#mainContent {
margin:0;
width:100%;
height:auto;
padding:10px 5px 40px 5px; background-color:red
}
#mainContent #sidebar { /* sidebar inside #mainContent */
float:left;
width:220px;
height:560px;
margin:10px 10px 40px 10px;
background-color:#CCCCCC;
}
#mainContent #featContent {
height:560px;
margin:10px 10px 40px 260px;
background-color:#CCCCCC;
overflow:auto;
}?
Demo hrer http://jsfiddle.net/j4C7T/
演示 hrer http://jsfiddle.net/j4C7T/
