Question

如果我在标题之后放置内容DIV（100％高度），甚至超过父DIV（SuperContainer DIV和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:
    
    <div id="wrapper">
        <div id="super_container">
            <div id="header">
                Header
            </div>
            <div id="content_container">
                Testing
            </div>
        </div>
    </div>

Answer 1

为什么不呢？标题高度为250px，content_container为100％，因此100％+ 250px大于100％。

如何解决这个问题取决于很多因素。

如果您希望内容随着标题的增长而缩小，那么在super_container上需要display:table，在标题和内容上需要display:table-row（简而言之，您需要一个表格）。

其他解决方案将内容拉到标题下（使用标题上的绝对定位和内容顶部的合适间距）。还有一些利差为负的技巧。

我建议你寻找一个符合你想要的布局并根据你的布局。

Answer 2

检查是否将 min-width 应用于子元素

儿童DIV超过父母DIV

2 个答案: