正如您在 demo 中看到的那样我的页脚栏不是它必须在的地方。我不明白为什么页脚在内容 div 之后没有解决。页脚必须紧跟在文章之后。我试图找到特定的关键字来在 Google 上搜索，但我找不到。
此外，我无法将样式应用于 about page .我认为这与第一个问题有关。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" lang="en"/>
<title>Title</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="containerANA">
<div id="header">
<div class="headerAlt">
</div>
</div>
<div class="temizle"></div>
<!--End of the header.php-->
<div id="content">
<div class="findler">
<div class="find"><a href="#" title="Find">Find</a></div>
<p>
<a href="#">insaf sahipleri</a>
<a href="#">BEN VE OLRİC</a>
<a href="#">insaf sahipleri</a>
<a href="#">BEN VE OLRİC</a>
<a href="#">insaf sahipleri</a>
</p>
</div>
</div>
<div class="temizle"></div>
<!--Begining of the footer.php-->
<div id="footer">
<ul>
<li><a href="http://www.olmasigereken.com/demo1/?view=about" title="about us">about us</a></li>
<li><a href="http://www.olmasigereken.com/demo1/?view=terms" title="terms of use">terms of use</a></li>
<li><a href="http://www.olmasigereken.com/demo1/?view=contact" title="contact">contact</a></li>
</ul>
</div>
</div>
</body>
</html>
样式.css:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
background:#000000;
color:#fff;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.temizle{clear:both;}
#containerANA{
width:%100px;
height:auto;
margin: 0 auto;
font:13px arial, helvetica, Geneva, sans-serif;
margin-left:15px;
margin-right:15px;
}
.temizle{
clear:both;
}
#header{
height:212px;
width:%100px;
margin:0 auto;
border-bottom:2px solid #66675e;
}
.headerAlt{
height:55px;
width:490px;
margin:0 auto;
margin-top:10px;
float:center;
}
#content{
width:%100px;
margin-top:35px;
}
.findler{
height:80px;
width:%100px;
}
.find{
background:url(img/find.jpg) no-repeat;
width:87px;
height:54px;
margin-top:26px;
margin-left:610px;
}
.find a{
width:87px;
height:54px;
display:block;
text-indent:-9999px;
}
#content p{
position: relative;
margin-left:auto;
margin-right:auto;
top:0px;
display: block;
padding: 5px;
color: #769B4E;
font-size:18px;
text-align:justify;
border: 0px solid #769B4E;
margin-top: 10px;
margin-bottom: 10px;
}
#content p a{
color:#ccc;
text-decoration:none;
}
#content p a:hover{
background:#e5da5f;
color:#000;
}
#footer{
margin-top:50px;
margin-bottom:20px;
}
#footer ul{
margin-left:35px;
}
#footer ul li{
display:inline;
margin-right:30px;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
}
#footer ul li a{
text-decoration:none;
color:#FF0000;
}
#footer ul li a:hover{
background:#e5da5f;
color:#000;
}
最佳答案
你已经在 CSS 中定义了
.find {
background: url(img/find.jpg) no-repeat;
width: 87px;
height: 54px;
margin-top: 26px;
margin-left: 610px;
}
.findler {
height: 80px;
width: %100px;
}
他们让#content的高度只有80px，但是里面的内容占用的空间比提供的多，导致内容溢出。
因此 .footer 位于 #content 下方，但在视觉上位于 #content 中的溢出内容下方。
只需从您的 CSS 规则中删除 height，让浏览器决定高度应该是多少。
关于html - Css 页脚定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13375962/