浮动div背景颜色直到页面结束才到达

时间:2014-03-31 19:44:19

标签: css html

我在显示2个具有单独背景颜色的浮动div时遇到问题。

所以顶部元素是我的标题。在它下面应该有一个导航和一个主要的div。

它们都有不同的背景颜色,默认情况下应该显示颜色直到页面末尾(即使div之间的文本长度不同)。

我做了一个jsfiddle演示以获得更好的解释。您可以单击导航div和主div上的以显示更多文本。

演示:http://jsfiddle.net/AfRH2/22/

HTML:

<section id="admin_header">

</section>

<section id="admin_main">
    <!-- Navigation -->
    <nav id="nav">
       text
    </nav>

    <!-- Content -->
    <article id="main">
        text
    </article>

    <div style="clear: both"></div>
</section>

CSS:

body { 
    font-size: 12px;
    height: 100%;
}

#admin_header {
    position: relative;
    height: 100px;
    background-color: #000000;
}

#admin_main {
    position: relative;
    min-height: 100%;
}

#nav {
    position: absolute;
    width: 160px;
    float: left;
    top: 0;
    left: 0;
    margin: 5px 0 0 0;
    background-color: #f5f4f2;
}

#main {
    position: absolute;
    float: left;
    top: 0;
    right: 0;
    left: 160px;
    margin: 5px 0 0 0;
    padding: 20px;
    background-color: #f9f9f9;
}

p { display: none; }

1 个答案:

答案 0 :(得分:0)

您的包含部分admin_main没有高度,因此导航仅使用所需的高度。向admin_main添加高度会解析。

html,body { 
    font-family: sans-serif;
    font-size: 12px;
    height: 100%;
}

#admin_main {
    position: relative;
    height: 100%
}

请参阅此处 - http://jsfiddle.net/7M4Ek/