Question

我的网页背景图片为1024x768。我的CSS和HTML如下。我还有一个标题图形和一个格式化文本的左侧菜单。

我想创建一个模板页面。一切都很好，除了......

我有一个页脚，我想在背景区域的底部显示。我如何定位，以便无论我添加什么内容，页脚保持不变？不固定在位置：固定但放置在预设位置。

我尝试使用div标记围绕除页脚之外的所有内容，并指定宽度和高度。然后我为页脚添加了div，并期望它将自己定位在第一个div之外。显然我误解了。

HTML

<body>

<div id="allcontent">

<div id="header">
<img src="images/xxxxxxxxxxx.png" alt="xxxxxxxxx" />
<br /</div>
<div id="menu">
<a href="home" alt="Go to home page">Home</a> 
<br />
<br />
<a href="weddings" alt="Go to home page">Weddings</a>
<br />
<br />
<a href="portraits" alt="Go to home page">Portraits</a>
<br />
<br />
<a href="blog" alt="Go to home page">Blog</a>
<br />
<br />

<a href="contact" alt="Contact Us">Connect</a>
</div>

</div>
<div id="footer">
<div id="phone">
tel. xxxxxxxx
</div>
<div id="email">
email: xxxx@xxxxxxxxxxxx.co.uk
</div>
<br />
<div id="copy">
&copy; 2012, xxxxxxxxxxxxxx
<br />
  Website constructed by <a class="footlink" href="http://xxxxxxxxxxx.co.uk" target="_blank">xxxxxxx</a>      
 </div>

</div>

</body>

CSS

body {
font-family:    Arial,Helvetica,sans-serif;
font-size:      large;
width:  auto;
margin-left:    auto;
margin-right:   auto;
background-color:   #451918;
color:  #221b1b;

}
div#allcontent  {
width: 1024px;
height: 768px;
margin-left:    auto;
margin-right:   auto;
background-image:   url("images/web page background 1024x768.jpg");
background-repeat:  no-repeat;
}
a   {   
text-decoration:    none;
}

div#menu    {
float:  left;
}
div#header  {
padding-top: 50px;
padding-left: 50px;
text-align: left;
}
div#footer  {
bottom: 0;
height: 50px;
text-align: center;
font-size:  85%;
color:  #221b1b;
}
div#copy    {
font-size:  50%;
}
div#phone   {
font-size:  85%;
margin-left:    40px;
float:  left;
}
div#email   {
margin-right:   40px;
font-size:  85%;
float:  right;
}
a.footlink:link {
color:  #221b1b;
}
a.footlink:visited  {
color:  #221b1b;
}
a.footlink:hover    {
color:  #226225
}
a:link {
color: #9c7f7f;
}
a:hover {
color: #221b1b;
}
a:visited {
color: #5f4d4d;
}

Answer 1

menu中有浮动，因此您必须清除它。在clear:both上提供#footer。像这样：

#footer  {
 clear:both
}

Answer 2

您必须清除页脚之前的任何div的浮点数。

继续并将clear:both设置为#footer以查看它是否解决了问题。

如果一切顺利，您不需要为页脚之前的任何元素设置高度，也不应用您可能尝试过的任何变通方法。

请参阅此fiddle

Answer 3

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

这是诀窍。您可以点击链接到定位页脚的教程

CSS定位查询

3 个答案: