题
我暂时删除了页脚,网站必须上线。所以链接也消失了。
正如您所看到的(在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;
}
或者,长话短说:我按照给出的指示这里。
解决方案
是的,所以使用100%内的#size,从包装中取出填充并将以下内容添加到#content
overflow:auto;
padding-bottom:30px;
然后你的链接在FF中为我工作
其他提示
您没有仔细按照说明操作。 Matthew's layout 的关键
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
是容器有位置:相对而页脚有位置:绝对。这将一个放在另一个里面。请注意,容器有一个为页脚保留的空间,通过保留页脚大小的填充。因此,布局仅在页脚高度固定时才有效。
绝对定位于botttom:0元素将自己置于最近的相对定位父元素的底部。如果没有,则使用视口,这就是布局中发生的事情。
你的页脚div不是你的包裹div的孩子。
这个怎么样?
将填充从主体底部移动到#wrap的底部。您的页脚总是距离“页面”底部30px。因为那个填充物。通过将它放在#wrap上,你可以防止#wrap的内容落后于你的页脚。
<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>
这对我有用。
*html #wrap {
...
}
本网站有一个非常好的技术演示: http://www.themaninblue。 COM /实验/ footerStickAlt /
此问题必定还有其他问题,上面描述的每种方法都可以在不同的网站上运行,而不是在我的网站上。
这是我的页面来源,不相关的内容被剥离(内容和内容):
<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%,则页脚会粘在正确位置的绿色底部。所以,如果它没有填满屏幕。
如果内容超过页面的100%,则页脚位于内容的某个位置,因此当我必须滚动查看每个内容时。