格式化 3 列加起来为 100%。但最后一列被推下

Question

如标题所述，这是我的 html 代码。

<body>
    <div id="wrapper">
        <div id="nav">
            <a href="#"><img class="logo" src="../media/images/Logo.png"
                             width="200px" height="200px" alt="Home" /></a>
            <ul class="navUL">
                <li><a href="#">Home</a></li>
                <li><a href="#">Movies</a></li>
                <li><a href="#">Members</a></li>
                <li><a href="#">Management</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>        
        </div>
        <div id="mainPage"></div>
        <div id="advertisement"></div>
    </div>
</body>

我的CSS是-

body, #wrapper 
{
    height:100%;
    margin: 0;
    padding: 0;
}
#wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
}
#nav
{
    background-image: url(../media/images/NavBackground.png);
    float: left;
    width: 20%;
    height: 100%;
}
#mainPage
{
    background-image: url(../media/images/ContentBackground.png);
    overflow: auto;
    width: 64%;
    height: 100%;
}
#advertisement
{
    background-image: url(../media/images/ContentBackground.png);
    float: right;
    width: 16%;
    height: 100%;
}

最后一栏，广告被推到底部。总数加起来是 100% 所以我不知道哪里出了问题。

我想要 post 图片，但我不能，因为代表率低。抱歉没有图片。

Answer 1

项目被下推一般是由浮动元素引起的。如果您重新排列 HTML，使广告位于您的主页之前，它将解决您的问题。

我已经用以下 CSS 测试了这个：

body, #wrapper 
{
    height:100%;
    margin: 0;
    padding: 0;
}

#wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
}

#nav
{
    background: red;
    float: left;
    width: 20%;
    height: 100%;
}

#mainPage
{
    background: yellow;
    overflow: auto;
    width: 64%;
    height: 100%;
}

#advertisement
{
    background: blue;
    float: right;
    width: 16%;
    height: 100%;
}

以及以下HTML：

<div id="nav">

        <ul class="navUL">
            <li><a href="#">Home</a></li>
            <li><a href="#">Movies</a></li>
            <li><a href="#">Members</a></li>
            <li><a href="#">Management</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

        </div>

        <div id="advertisement">test</div>
        <div id="mainPage">test</div>

    </div>

Answer 2

见下文CSS

wrapper 内的所有 div 都有一个左浮动，总宽度为 100%。

#wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
}

#nav {
    float: left;
    width: 20%;
    height: 100%;
}

#mainPage {
    float: left;
    width: 65%;
    height: 100%;
}

#advertisement {
    float: left;
    width: 15%;
    height: 100%;
}

格式化 3 列加起来为 100%。但最后一列被推下

formatted 3 columns adding up to 100%. But the last column is pushed down

css

xhtml