Question

我无法将网页分为header，content和footer。我在stackoverflow上关注了其中一个主题。但是，当我尝试向内容部分添加任何内容时，我的所有内容都会显示在footer元素下方。到目前为止，这是我的代码。

任何人都能解释我做错了什么，背后的原因是什么？

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        //Removed
    </head>
    <body>
       <div class="main-wrapper">
            <header>
                <?php 
                require('header.php');
                ?>
            </header>
            <section class="page-content">
                yeah
            </section>
           <footer>
                <?php 
                include('footer.php');
                ?>
           </footer>
       </div> 
    </body>
</html>

这是我的CSS

    body, html {
    width: 100%;
    height: 100%;
    background: #ddd;
    padding: 0;
    margin: 0;
    }

    .main-wrapper {
    box-sizing: border-box;
    min-height: 100%;
    padding: 0;
    position: relative;
    }

    article {
    background-color: white;
    }

    footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #555;
    height: 55px;
    }
    .page-content {
    width: 100%;
    height: 100%;
    }

    .nav-bar {
    width: 100%;
    background: white;
    text-align: center;   
    }

页面内容显示在页脚下方，即使我将其位置设置为绝对位置。我究竟做错了什么？谢谢你的帮助。

Answer 1

你应该添加

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

在您的部分和页脚标记之间，看看是否有帮助

Answer 2

.page-content {
    box-sizing:border-box;
    padding:0 0 55px; /* make space for footer */
}

页脚下的内容

2 个答案: