2

我暂时删除了页脚，网站必须上线。所以链接也消失了。

如您所见（在 FF2 和 IE7 中）页脚位于屏幕底部，但不在页面底部（内容）。

我的代码中有这个：

<div id="wrap">
    <div id="top"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

这在css中：

html {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    padding-bottom: 30px;  /* height of the footer */
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    min-height: 100%;
    position: relative; 
}
*#wrap {            /* IE hack */
height:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    padding: 0;
    margin: 0;
}

或者，长话短说：我按照此处给出的说明进行操作。

4

8 回答 8

4

您没有足够仔细地遵循您的指示。马修布局的关键

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

是容器有位置：相对而页脚有位置：绝对。这将一个放在另一个里面。请注意，容器通过保留页脚大小的 padding-bottom 为页脚保留空间。因此，布局仅在页脚高度固定时才有效。

使用botttom:0 绝对定位的元素将把自己放在最近的相对定位的父元素的底部。如果没有，则使用视口，这就是您的布局中发生的情况。

您的页脚 div 不是您的 wrap div 的孩子。

于 2009-01-04T17:09:50.893 回答
3

这个怎么样？

于 2009-01-04T16:48:00.860 回答
1

将填充从主体底部移动到#wrap 的底部。由于该填充，您的页脚始终距离“页面”底部 30 像素。通过将其放在#wrap 上，您将防止#wrap 的内容出现在您的页脚后面。

于 2009-01-04T16:55:40.483 回答
1

对，所以 #size 在 100% 以内，去掉包装上的填充并将以下内容添加到 #content

overflow:auto;
padding-bottom:30px;

那么你的链接在FF中对我有用

于 2009-01-05T12:45:12.923 回答
0 
    <style type="text/css">
html {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    position: relative; 
}
*#wrap {            /* IE hack */
height:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    padding: 0;
}
</style>
<div id="wrap">
    <div id="top"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

这对我有用。

于 2009-01-04T16:55:19.533 回答
0

IMO，IE star hack 导致了这个问题。尝试使用以下命令更改 IE hack：

*html #wrap {
    ...
}
于 2009-01-04T18:25:33.860 回答
0

这件事肯定有别的原因，上面描述的每种方法都适用于不同的网站，只是不适用于我的网站。

这是我的页面源，不相关的东西被剥离（内容和东西）：

<body>
    <div id="size"> javascript textsize modifier</div>
    <div id="wrap">

        <div id="top"> logoimage
            <div id="menu">
                <div id="menuwrapper">
                    <ul id="primary-nav">
                        <li> Homelink </li>
                        <li class="menuactive menuparent" class="over"> Link 2
                            <ul>
                                <li> Sublink 1 </li>
                                <!-- etcetera //-->
                            </ul>
                        </li>
                        <li class="menuparent" class="over"> Active Link 3
                            <ul>
                                <li> Sublink 1</li>
                                <!-- etcetera //-->
                            </ul>
                        </li>
                    </ul>
                </div> <!-- end menuwrapper //-->
            </div> <!-- end menu //-->
        </div> <!-- end top //-->

        <div id="content">
            <div id="newssnippet"></div>
            <div id="roundedright"> <!-- rounded corners //-->
                <!-- 6 divs to create rounded corners //-->
                <div id="right">Random main content</div>
                <!-- 7 divs to create rounded corners //-->
            </div> <!-- end rounded corners //-->

            <div id="logo">Another logo</div>

            <div id="roundedleft"> <!-- rounded corners again //-->
                <!-- 6 divs to create rounded corners //-->
                <div id="left">News content</div> 
                <!-- 7 divs to create rounded corners //-->
            </div>  <!-- end rounded corners //-->
        </div> <!-- end content //-->

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

    </div><!-- end wrap //-->
</body>

显然，我是按照开篇链接中的规定布局进行的。

然后在CSS中，我有：

html {
    height: 100%;
    margin: 0;
    padding: 0;
} 
body {
    background: #e7e7e7 url(images/cms/background.jpg) repeat-x;
    font-family: Verdana, Arial, sans-serif;
    font-size: .8em;
    height: 100%;
    margin: 0;
    padding: 0;
    padding-bottom: 30px;
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    position: relative; 
    min-height:100%;
}
*html #wrap {     /* IE hack */
    height:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: transparent url(images/cms/footer.png) no-repeat bottom center;
    padding: 0;
}
#footer p {
    margin: 0;
    padding: 0;
    padding-top: .7em;
    text-align: center;
}
#footer a {
    text-decoration: none;
}

这应该是每一个相关的位......

我错过了什么？

记录：如果内容低于 100% 高，页脚将在正确的位置粘在 oage 的底部。所以，如果它没有填满屏幕。
如果内容超过页面的 100%，页脚位于内容的一半，所以当我必须滚动查看所有内容时。

于 2009-01-04T20:10:25.880 回答
0

这个网站有一个很好的演示技术：http ://www.themaninblue.com/experiment/footerStickAlt/

于 2009-01-06T13:39:43.203 回答