Question

我目前难以让网站的页脚正常工作。我认为这是因为我固定定位的标题和容器div，但我需要修复它们以在滚动时保持在顶部。我不知道如何考虑到这一点，当容器div为空时，页脚出现在底部。

HTML： -

 <body>
        <div id="wrapper">
        <div id="header">
            <div id="headerContent">
            </div>
        </div>
        <script>
            $(document).ready(function() {
                  $('#container').css('marginTop', $('#header').outerHeight(true) + $('#navbar').outerHeight(true) );
            });
        </script>  
                <div id="navbar">
                    <div id ="navbarContent">  

                </div>
        </div>
        <div id="container">
        </div>
        <div id="footer">
        <div id="footerContent">
        </div>
        </div>   
 </div>
    </body>
</html>

CSS： -

#container{
    width:960px;
    margin:auto;
    overflow:hidden;
}

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


#navbar{
    width:100%;
    height:40px;
    margin:auto;
    background-color:#4e8885;
    position:fixed;
    top:120px;
    padding:0px;
}

#header{
    width:100%;
    height:120px;
    margin:auto;
    background-color:#8bbcba;
    position:fixed;
    top:0px;
}

#footer{
    width:100%;
    min-height:20px;
    margin:auto;
    background-color:#8bbcba;
    position:absolute;
    bottom:0;
    left:0;
}

Answer 1

在使用固定高度的示例中，没有必要动态计算边距。您应该只能将container的边距设置为分别与margin-top和margin-bottom的页眉和页脚的总数相匹配。看到这个jsFiddle：http://jsfiddle.net/9Jdrr/

如果你需要动态计算它，你应该能够根据这种安排来做。

固定div下的页脚

1 个答案: