0

查看 jsfiddle 中的代码：http: //jsfiddle.net/UrBFR/

HTML：

<div id="main">
        <div id="header">
        </div>
        <div id="menupane">
            <a href="#" class="buttons">Test</a>
            <a href="#" class="buttons">Test</a>
            <a href="#" class="buttons">Test</a>
            <a href="#" class="buttons">Test</a>
            <a href="#" class="buttons">Test</a>
            <a href="#" class="buttons">Test</a>
            <a href="#" class="buttons">Test</a>
            <a href="#" class="buttons">Test</a>
        </div>
        <div id="body">
        </div>
        <div id="footer">
        Hello
        </div>
    </div>

CSS：

#main
{
    width: 60em;
    height: 36em;
    margin: auto;
}

#header
{
    background-color: #00c0ff;
    height: 5em;
}

#menupane
{
    background-color: green;
    width: 10em;
    height: 28em;
    float: left;
}

.buttons
{
    color: #1f3568;
    text-decoration: none;
    font-family: courier new;
    color: #000000;
    margin-right: 0px;
    line-height: 40px;
    text-align: center;
    display: block;
}

.buttons:hover
{
    background-color: #ff9600;
}

#body
{
    background-color: yellow;
    float: right;
    height: 28em;
    width: 50em;
}

#footer
{
    background-color: red;
    height: 35em;
}

请注意，页脚的高度为 35em。我希望高度为 3em，但如果我这样做，它就不会出现。基本上，发生的事情是页脚 div 低于所有其他 div，只有当我给出的高度大于所有其他 div 的总和时，我才能看到页脚。这种情况以前从未发生过。谁能告诉我为什么会这样以及如何解决这个问题？

4

1 回答 1

1

我分叉了你的 jsfiddle 来提供答案：

http://jsfiddle.net/nickadeemus2002/SCuvR/

CSS：

#main
{
    width: 60em;
    height: 36em;
    margin: auto;
}

#header
{
    background-color: #00c0ff;
    height: 5em;
}

#menupane
{
    background-color: green;
    width: 10em;
    height: 28em;
    float: left;
}

.buttons
{
    color: #1f3568;
    text-decoration: none;
    font-family: courier new;
    color: #000000;
    margin-right: 0px;
    line-height: 40px;
    text-align: center;
    display: block;
}

.buttons:hover
{
    background-color: #ff9600;
}

#body
{
    background-color: yellow;
    float: right;
    height: 28em;
    width: 50em;
}

#footer
{
    **clear:both;**
    background-color: red;
    height: 3em;
}

注意#footer CSS 规则。我添加了“clear:both”，因为您在“#menupane”中实现了“float”。您需要清除浮动行为，以便其他元素可以按预期显示。

您可以在此处找到更多关于“清除”的信息：

http://www.w3schools.com/cssref/pr_class_clear.asp

清除“both”意味着左侧或右侧不能出现浮动元素。

于 2013-07-01T02:34:17.440 回答