Question

正如您在demo中看到的那样，我的页脚栏不是它必须的地方。我无法弄清楚为什么页脚在内容div之后没有解决。页脚必须在文章之后。我试图找到特定的关键字来搜索谷歌，但我不能。

另外，我无法将样式应用于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>

的style.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;
}

Answer 1

您已在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，让浏览器决定高度应该是多少。

Answer 2

从.findler移除身高值并将其设为自动。

由于内容div的高度已经固定，因此内容超出了div，因此您可以看到页脚问题。

.findler {
height: auto;
width: 100%;
}

Answer 3

将clear:both;添加到页脚的CSS中。

如果它仍然不起作用，请在html中的页脚前添加<div class="clearer"></div>。并在css .clearer{clear:both;}

中声明这一点

Answer 4

.... 我现在加上这个

您min-height:80px; 类

中的

.findler

就像这样

.findler {
height:80;  // remove this line
    min-height: 80px;  //  add this line
}

Answer 5

http://www.cssstickyfooter.com/ - 这可能有所帮助，他们很好地解释了页脚定位

Css页脚定位

5 个答案: