Javascript 固定div下的页脚_Javascript_Html_Css

Javascript 固定div下的页脚

javascript html css

Javascript 固定div下的页脚,javascript,html,css,Javascript,Html,Css,我目前很难让我的网站页脚正常工作。我认为这是因为我的固定位置的标题和容器div，但我需要它们被固定在顶部滚动。当container div为空时，如果页脚显示在底部，我不确定如何考虑这一点 HTML:- <body> <div id="wrapper"> <div id="header"> <div id="headerContent"> </div>

我目前很难让我的网站页脚正常工作。我认为这是因为我的固定位置的标题和容器div，但我需要它们被固定在顶部滚动。当container 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>

在使用固定高度的示例中，不需要动态计算边距。您应该能够设置

容器的页边距

，以分别与

页边距顶部

和

页边距底部

的页眉和页脚总数相匹配。请参阅此JSFIDLE：

如果您需要动态计算页脚，您应该能够根据这种安排进行计算。

您是否有这样一个示例页面，该页面不在线工作？您的意思是希望页脚像屏幕底部的工具栏一样固定不变，还是希望页脚向上拉到任何内容下方？@PeterFeatherstone否，我只希望页脚与页面底部对齐，这样，如果容器没有内容，您就不必滚动到页脚example@PeterFeatherstone嗨，Pete，感谢你的回答，但是容器需要知道何时开始，否则容器将无法在页面下方160像素处开始。（这是由于页眉和导航栏的固定位置造成的）。让我们看看，如果去掉容器中的所有内容，页脚仍然位于屏幕底部下方。@user1060187这只是因为我在

container

元素上放置了

min height

。如果您想将其缩放到0高度，只需删除

minheight:300px并且应该可以正常工作。然后页脚会直接出现在导航栏之后，不是吗？@user1060187是的。我想我不确定你要的是什么：不管内容的高度如何，页脚总是在内容的底部。这不是期望的行为吗？主要是因为固定的页眉和导航栏，页脚现在显示在内容下方，但不在屏幕底部（100%），它是100%+页眉和导航栏的额外高度。有办法解决这个问题吗？
#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;
}