Css 格式化3列，总计100%。但最后一列被向下推_Css_Xhtml

Css 格式化3列，总计100%。但最后一列被向下推

css

Css 格式化3列，总计100%。但最后一列被向下推,css,xhtml,Css,Xhtml,如标题所述，这是我的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

如标题所述，这是我的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>

最后一列，广告被推到底部。总数加起来是100%，所以我不知道怎么了

我想发布图片，但我不能发布，因为代表性太低。很抱歉没有图片。

向下推的项目通常是由浮动元素引起的。如果您重新排列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>

请参见以下CSS

包装内的所有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%;
}

如果您在问题中包含图片链接，其他人将编辑该问题以将其移动到问题中。主页不会浮动，因此它将始终向下推广告。尝试在HTML中浮动主页面或在主页面之前放置广告。非常感谢！在主页之前更改广告有帮助。

#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%;
}