父div高度小于预期

时间:2014-06-15 14:22:18

标签: html css

我在网页设计上练习,我注意到父div的高度比孩子div小。

enter image description here

这是我的css代码:

html,body{
    background-color: #ecf0f1 ;
    height: 100%;
    padding:0px;
    margin:0px;
}


#homeDisplay{
    width: 850px;
    height: auto;
    border: 2px solid #7f8c8d;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-left:auto;
    margin-right:auto;
    padding:8px;
}

#signupForm{
 text-align: right;
    float:right;
    width: auto;
    height: auto;
    border: 2px solid #7f8c8d;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 8px;
}

2 个答案:

答案 0 :(得分:1)

您正在使用float:right作为内部内容,因此会从文档的正常流程中删除它,并且父级无法根据内容的大小调整其大小。修复:将overflow:auto CSS属性设置为容器。

答案 1 :(得分:1)

这是因为浮动:在你的#signupForm中。这会导致div从文档的浮动中取出。

放一个

<div class="clear"></div>

.clear {
    clear: both;
}
注册表后