如何使用JavaScript设置内容与页脚之间的距离？

Question

下面的代码工作得很好(控制距离并使页脚保持不变)，但是我需要编辑页脚和内容之间的距离，因为有很大的差距！我正在使用asp.net中的VisualStudio2014软件java脚本。

Masterpage.Master HTML % JavaScript代码：

 <body>
    <form id="form2" runat="server">
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
            </asp:ContentPlaceHolder>
            <div id="footer"></div>
        </div>
    </form>
</body>
    <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript">
        $(window).bind("load", function () {
            var footer = $("#footer");
            var pos = footer.position();
            var height = $(window).height();
            height = height - pos.top;
            height = height - footer.height();
            if (height > 0) {
                footer.css({
                    'margin-top': height + 'px'
                });
            }
        });
    </script>
</html>

CSS

#footer {

    width: 100%;
    height: 300px;
    background-image: url(foot_bg.jpg);
    background-size: 100% 100%;

}

我试过调整它，但没有得到任何地方的快速！任何帮助都将不胜感激。

Answer 1

这个问题有点混乱，因为你说你希望它粘在(底部)，但是你想缩小页脚和内容之间的差距。

考虑到页脚有固定的高度，这些方法之一一次是可能的。

如果您想缩小页脚和内容之间的差距，那么从您的主div中移除页脚，并在您的#页脚内添加一个边距顶。

    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
        </asp:ContentPlaceHolder>

    </div>
    <div id="footer"></div>

如果您想要一个位于内容下面的粘性页脚，可以查看下面的链接：https://css-tricks.com/snippets/css/sticky-footer/上的教程。

如果内容扩展，这将与内容一起滚动。

第三个选项是用户位置:固定的和底部的:0px为您的页脚，所以它停留在页面的底部和内容滚动在它后面。

注:在所有这些情况下，您将不需要JS代码。