我有一个背景图片为 1024x768 的网页。我的 CSS 和 HTML 在下面。我还有一个标题图形和一个带格式文本的左侧菜单。
我想创建一个模板页面。一切正常，除了...
我有一个要显示在背景区域底部的页脚。我如何定位它，以便无论我添加什么内容，页脚都保持不变？ Not fixed as in position:固定但放置在预设位置。
我曾尝试使用 div 标记来包围除页脚以外的所有内容，并指定宽度和高度。然后，我为页脚添加了一个 div，并希望它能将自己定位在第一个 div 之外。显然我误会了。
JSFiddle with following HTML and CSS
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">
© 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;
}
最佳答案
您必须清除页脚之前的任何 div 的 float 。
继续将 clear:both 设置为 #footer 以查看它是否解决了问题。
如果一切顺利，您将不需要为页脚前的任何元素设置高度，也不需要应用您可能尝试过的任何解决方法。
引用这个fiddle
关于CSS定位查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9791901/