子级 DIV 超过父级 DIV
如果我将 Content DIV（100% 高度）放在 Header 之后，甚至超过 Parent DIV（SuperContainer DIV 和 Wrapper 的高度为 100%）。
我想要实现的是，我希望内容 div 为 100%（意味着，我希望它被拉伸到页面的末尾），并且如果其中的文本溢出或超出，我希望父 div相应地延伸。
请让我知道这个问题的解决方案。下面是代码...请帮忙。谢谢。
CSS：
* {
margin: 0;
}
html, body {
height:100%;
}
#wrapper {
width: 75%;
background-color:#09F;
margin-left:auto;
margin-right:auto;
height:100%;
}
#super_container{
height:100%;
width: 50%;
background-color:#FF0;
margin-left:auto;
margin-right:auto;
}
#content_container{
width: 50%;
background-color:#F00;
margin-left:auto;
margin-right:auto;
height:100%;
}
#header{
height:250px;
}
</pre>
HTML：
标头
测试
If I place Content DIV (100% height) after Header, if even exceeds the Parent DIVs (SuperContainer DIV and Wrapper with an 100% height).
What I am trying to achieve is, i want the content div to be 100% (means, i want it to be stretched to the end of the page), and if the text inside it overflows or exceeds, i want the parent divs to extend along accordingly.
Please let me know the solution for this. Below is the code... Please help. Thanks.
CSS:
* {
margin: 0;
}
html, body {
height:100%;
}
#wrapper {
width: 75%;
background-color:#09F;
margin-left:auto;
margin-right:auto;
height:100%;
}
#super_container{
height:100%;
width: 50%;
background-color:#FF0;
margin-left:auto;
margin-right:auto;
}
#content_container{
width: 50%;
background-color:#F00;
margin-left:auto;
margin-right:auto;
height:100%;
}
#header{
height:250px;
}
</pre>
HTML:
<div id="wrapper">
<div id="super_container">
<div id="header">
Header
</div>
<div id="content_container">
Testing
</div>
</div>
</div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
为什么不呢？ header 的高度为 250px，content_container 的高度为 100%，因此 100% + 250px 大于 100%。
如何解决它取决于很多因素。
如果您希望内容随着标题的增长而缩小，则需要在 super_container 上使用
display:table，并在标题和内容上使用display:table-row（简而言之，您需要一个表格）。其他解决方案包括将内容拉到标题下方（使用标题上的绝对定位和内容顶部的适当间距）。还有一些负边距的技巧。
我建议您寻找一种能够满足您需求的布局，并以此为基础进行布局。
Why wouldn't it? header is 250px height and content_container is 100% so 100% + 250px is greater than 100%.
How to fix it depends on a lot of factors.
If you want content to shrink as header grows you need
display:tableon super_container anddisplay:table-rowon header and content (in short, you need a table).Other solutions invlove pulling the content up under the header (using absolute positioning on the header and suitable spacing at the top of content). There are also tricks with negative margins.
I suggest you look for a layout that does what you want and base your layout of that.
检查 min-width 是否应用于子元素
Check for min-width being applied to the child element