0

我目前很难让我的网站页脚正常工作。我认为这是因为我固定定位的标题和容器 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;
}
4

1 回答 1

0

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

如果需要动态计算，应该可以根据这个安排来做。

于 2013-04-01T14:50:36.120 回答