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 ルールに注意してください。「#menupane」で「float」を実装したので、「clear:both」を追加しました。フロート動作をクリアして、追加の要素が期待どおりに表示されるようにする必要があります。

「クリア」の詳細については、こちらをご覧ください。

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

「両方」をクリアすると、フローティング要素が左側または右側に表示されないことを意味します。

于 2013-07-01T02:34:17.440 に答える