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