0

我有这个中央 div，它根据导航栏中选择的选项卡具有不同的内容长度。我给了 div 一个最小高度，期望它根据内容长度进行相应调整。我还将高度属性设置为自动。这没有用。但是添加溢出：隐藏解决了这个问题。我真的无法理解这实际上是如何工作的。

任何帮助将不胜感激

.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>
4

2 回答 2

1

也评论了这个。

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

通过使用它，容器可以识别出它里面有元素。

更新

查看有关如何处理浮动儿童的演示。overflow:auto

于 2013-08-22T16:19:31.103 回答
0

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

在这种情况下，内容很可能没有填满min-heightof 700px，因此有额外的空白。这只能通过overflow: hidden;（收缩包装内容）或减少min-height.

于 2013-08-22T14:55:58.207 回答