javascript - 固定 div 下的页脚-6ren

javascript - 固定 div 下的页脚

转载作者：行者123 更新时间：2023-11-28 13:08:01

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