Fixed for CSS Margin Collapsing
Assuming I have HTML like
<body id="doc">
<div id="container">
ddd
</div>
</body>
And my CSS is
#doc {
margin-top:0;
width: 480px;
height: 320px;
开发者_运维知识库 background-color: red;
overflow:auto;
}
#container {
text-align: center;
width: 400px;
background-color: green;
margin: 10px;
}
It seems by using the overflow:auto does not help, any idea?
Force the lower level to stretch down to the last element by doing a clear:
<style>
#doc {
margin-top:0;
width: 480px;
height: 320px;
background-color: red;
overflow:auto;
}
#container {
text-align: center;
width: 400px;
background-color: green;
margin: 10px;
}
#stretchmyparent {
clear:both;
}
</style>
<body id="doc">
<div id="container">
ddd
</div>
<div id='stretchmyparent'></div>
</body>
精彩评论