粘页脚问题答案

【问题标题】：Sticky footer issue粘页脚问题
【发布时间】：2011-12-04 07:24:04
【问题描述】：

我遇到了粘页脚技巧的问题。问题是我想将左侧导航菜单的右边框（实际上边框是内容div的左边框）调整到#container的高度。但正如您在给定链接上看到的，我只能看到 20-30% 的右边框。我该如何解决？请帮忙

链接到页面 http://smiths-heimann.az/?page=2

【问题讨论】：

您应该在此处发布您的代码。并且还尝试创建一个 jsFiddle 或 jsBin 以便人们可以玩它。

标签： html css footer sticky-footer

【解决方案1】：

--在css中使用背景--

使用 1 像素高、998 像素宽的背景图像，其中包含“边框”像素。这将解决这个问题。

我做了一个例子：

在css的#container下添加这一行：

background: url("http://www.elbowroom.co.il/test.png") repeat-y; (it works)

您可以稍后将其替换为您自己的背景。

--使用 jQuery-- 您可以定义内容的高度以随容器的高度展开。

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function(){

            $("div#content").height($(div#container).height() - ???);
            $(window).resize(function(){
                $("div#content").height($(div#container).height() - ???);
            });
        });
    </script>

用适合您的金额替换问号。

【讨论】：