-1

我已经查找了如何将页脚粘贴到页面底部，但我无法让它真正起作用！如果我发布我的代码，您可以查看并更改它以使其正常工作，还可以解释一下您是如何做到的？

HTML：

<!DOCTYPE html>
<html>
<head>
<title>Aaron Kelsey - Home</title>`enter code here`

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

</head>

<body>
    <div id="wrapper">
        <div class="header_wrapper">

            <ul id="navigation">
                <li><a href="index.html">HOME</a></li>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="work.html">WORK</a></li>
                <li><a href="contact.html">CONTACT</a></li>
            </ul>
        </div>  
            <div id="line-1"></div>
            <div id="line-2"></div>
        <div class="content">
            <img class="header" src="images/header.png">


        </div>

        <div class="footer">
        </div>
    </div>
</body>
</html>

CSS

* {
   margin: 0px;
   padding: 0px;
}

body{
    margin: 0 auto;
    padding:0;
    margin: 0;
    height: 100%;
    background-color: #F5F5F5;
}

img.header{
    display: table;
    margin: 0 auto;
}

#wrapper{
    min-height: 100%;
    position: relative;
}

.header_wrapper{
    display: table;
    margin: 0 auto;
    width: 1000px;
    height: 50px;
    position: relative;
    padding:10px;
}

.content{
    position: relative;
    margin: 0 auto;
    width: 1000px;
    height: 100%;
    min-height: 100%;
    padding:10px;
    padding-bottom:150px;
}

.footer{
    position: absolute;
    margin: 0 auto;
    bottom: 0px;
    width: 100%;
    height: 150px;  
    background-color: #E0E0E0;
}

#line-1{
    position: absolute;
    margin: 0 auto;
    width: 100%;
    height: 1px;
    background-color: #E0E0E0;
    top: 10px;
}

#line-2{
    position: absolute;
    margin: 0 auto;
    width: 100%;
    height: 1px;
    background-color: #E0E0E0;
    top: 50px;
}

#navigation {
    position: relative;
    width: 1000px;
    height: 10px;
    font-size: 18px;
    font-family: Arial;
    font-weight: bold;
    top: 20px;
    text-align: center;
}

#navigation li { 
    display: inline; 
    padding: 50px; 
}

#navigation a {
    text-decoration: none;
    color: #A9A9A9;
}

#navigation a:hover {
    color: #1e1e1e;
}
4

1 回答 1

1

您的页脚位于包装器内。它固定在该 div 的底部，但不是主体。

将页脚 div 放在包装器之外，这很好。

<div id="wrapper">
  <div class="header_wrapper">
      <ul id="navigation">
          <li><a href="index.html">HOME</a>
          </li>
          <li><a href="about.html">ABOUT</a>
          </li>
          <li><a href="work.html">WORK</a>
          </li>
          <li><a href="contact.html">CONTACT</a>
          </li>
      </ul>
  </div>
  <div id="line-1"></div>
  <div id="line-2"></div>
  <div class="content">
      <img class="header" src="images/header.png" />
  </div>
</div>
<div class="footer"></div>

JSFIDDLE

同样在您的页脚中，您不需要拥有，margin: 0 auto;因为它是 100%。接下来就是像这样关闭你的图像标签，<img src="" alt="" />.

于 2013-11-08T22:44:28.630 回答