asp.net如何设置内容和使用 JavaScript 的页脚之间的距离?

发布时间: 2017/3/26 5:38:43
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

下面的代码运行得很好 (控制的距离和使它贴在页脚) 不过我需要编辑页脚和内容之间的距离,还有很大的差距 !我在 asp.net 中使用的软件 visual studio 2014、 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%;

}

我有试过调整,但越来越不在快速 !任何帮助将不胜感激。

解决方法 1:

问题是有点令人迷惑的既然你说你想要它坚持 (底部),但您想要减少页脚和内容之间的差距。

这些方法之一是可能在页脚具有固定的高度的时间考虑。

如果你想要降低页脚和内容之间的差距,然后从你主要的 div 中删除页脚,并将边距添加到你希望你的 #footer 里面的金额。

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

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

如果你想要粘的页脚,下方的内容,你可以查阅下面的链接教程︰ https://css-tricks.com/snippets/css/sticky-footer/

如果它延伸,这将随内容一起滚动。

第三个选项会到用户位置︰ 固定和底部︰ 0px 为你的页脚,使其保持在页面和内容的底部滚动在它后面。

注︰ 在所有这些情况下,你不会需要你的 JS 代码。

官方微信
官方QQ群
31647020