Question

我有这个中央div，根据导航栏中选择的标签，内容长度不同。我给了div一个最小高度，期望它根据内容长度进行相应的调整。我还将height属性设置为auto。这没用。但添加溢出：隐藏解决了问题。我真的不明白这是如何起作用的。

非常感谢任何帮助

.central{
width: 70%;
min-height: 700px;
height: auto;
margin: 20px auto;
background-color: #FFFFFF;
border-radius: 5px;
box-shadow: 2px 2px 20px -5px #CFCFCF, -2px -2px 20px -5px #CFCFCF;
overflow: hidden;
}

修改如果我无法正确解释我的问题，请道歉。没有溢出的情况发生了什么：隐藏的是中央div中的内容流出了div，但在使用之后，中央div的高度似乎已经调整好以适应内容。相关的css和标记如下 -

.central{
width: 70%;
min-height: 700px;
height: auto;
margin: 20px auto;
background-color: #FFFFFF;
/*border: 1px solid #C6C6C6;*/
border-radius: 5px;
box-shadow: 2px 2px 20px -5px #CFCFCF, -2px -2px 20px -5px #CFCFCF;
overflow: hidden;
}

.main_content{
width: inherit;
height: inherit;
}

.main_content img{
max-width: 100%;
height: auto;
}

#content1{
margin: 20px;
}

.img{
width: 25%;
height: 25%;
margin: 20px;
float: left;
}

.desc{
width: 65%;
height: auto;
min-height: 650px;
float: left;
overflow: hidden;
margin-top: 20px;
font-family: 'Aleor';
font-size: 100%;
}

.desc p:last-child{
padding-bottom: 30px;
}

HTML

<div class="central">
    <section id="content1">
        <div class="main_content">
            <article class="img"><img src="profile.jpg"/></article>
            <section class="desc">
                <p>The content</p>
            </section>
        </div>
    </section>
</div>

Answer 1

也评论了这一点。

您可能有导致问题的浮动元素。您可以使用overflow: auto修复此问题。

通过使用它，容器识别出其中有元素。

<强>更新

查看demo overflow:auto如何与浮动儿童合作。

Answer 2

overflow: hidden; 阻止 在其父容器外显示的任何内容。

在这种情况下，内容很可能没有填满min-height 700px，因此有额外的空格。这只能通过overflow: hidden;缩小（缩小内容）或缩小min-height来缩小。

溢出实际上是如何工作的？

2 个答案: