在我添加内容之前，在遵循教程到底部后页脚被定位？

Question

你好，我正在尝试将我的页脚放在页面底部它在页面的一半。

我不需要它始终出现在所有内容的下方...我是初学者，在学习教程的过程中努力学习，所以您能否记住这一点...提前致谢！

这是我的style.css

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local(OpenSans), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}
* {
  margin: 0;
  padding: 0
}
body {
  background: #f5f5f5;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  height: 100%
}
a {
  text-decoration: none;
  color: #444
}
a:hover {
  color: blue
}
section {
  background: #000;
  box-shadow: 0 2px 2px #ebebeb
}
header {
  margin: 0 auto;
  text-align: center;
  position: relative;
  background: url(blackboardbg.jpg) 0 no-repeat;
  background-size: 100% 100%
}
nav li {
  display: inline-block;
  padding: 40px 30px 37px 0
}
nav li:nth-child(3) {
  padding-right: 200px
}
nav li:nth-child(4) {
  padding-left: 220px
}
.logo {
  background: url(images/logo.png) 50% 0 no-repeat;
  background-size: 300px 211px;
  width: 300px;
  height: 211px;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 21px
}
#locator {
  position: absolute;
  visibility: show;
  left: 950px;
  top: 165px;
  z-index: 100
}
p {
  margin: 150px auto 0;
  width: 600px;
  text-align: center;
  font-size: 15px
}
navmain {
  line-height: 30px;
  background-color: #eee;
  border: 1px solid #b9b9b9;
  border-radius: 5px;
  height: 300px;
  width: 200px;
  float: left;
  padding: 5px
}
sectionblank {
  width: 60px;
  float: left;
  padding: 10px
}
sectionmain {
  background-color: #eee;
  border: 1px solid #b9b9b9;
  border-radius: 5px;
  width: 700px;
  float: left;
  padding: 10px
}
#container {
  min-height: 100%;
  height: 100%;
  position: relative
}
#contentmain {
  width: 75%;
  margin: 0 auto
}
#content {
  padding: 10px;
  padding-bottom: 80px
  /* Height of the footer element */
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  /* Height of the footer */
  background: url(blackboardbg.jpg) 0 no-repeat;
  background-size: 100% 100%
}

还有 index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>
    Casper Creations
  </title>
  <meta content="Casper Creations" name="description">
  <meta content="Lucy Smith" name="author">
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="container">
    <section>
      <header>
        <nav>
          <ul>
            <li>
              <img src="buttons/home.png">
            </li>

            <li>
              <img src="buttons/about.png">
            </li>

            <li>
              <img src="buttons/services.png">
            </li>

            <li>
              <img src="buttons/gallery.png">
            </li>

            <li>
              <img src="buttons/FAQ.png">
            </li>

            <li>
              <img src="buttons/contact.png">
            </li>
          </ul>
        </nav>

        <div class="logo">
        </div>
      </header>
    </section>

    <p>
    </p>

    <div id="contentmain">
      <div id="locator">
        <img src="callnow.png">
        <br>
      </div>
      test
      <br>test
      <br>test
      <br>test
      <br>test
      <br>test
      <br>test
      <br>test
      <br>test
      <br>test
      <br>test
      <br>test
      <br>test
      <br>test
      <br>test
      <br>
      <b>Categories</b>
      <br>
      <br>
      <i>Kids</i>
      <br>← Frozen
      <br>← Peppa Pig
      <br>← My Little Pony
      <br>← Mr Tumble
      <br>

      <h1>
                    Welcome
                </h1>

      <p>
        Welcome to Casper Creations
      </p>
    </div>
  </div>

  <div id="footer">
    <table style="width: 100%; height: 100%">
      <tr style="vertical-align: central">
        <td style="text-align: center; color:#FFFFFF; font-size: 12px">
          <b>Special Offers | Advanced Search | Reviews | Create
                        an Account | Log In</b>
        </td>
      </tr>
    </table>
  </div>
</body>

</html>

Answer 1

我刚刚在此 Fiddle 中添加并调整了您的标记。它没有按预期工作的原因是，#footer 已将 position:absolute; 设置为 bottom:0;，但此位置是相对于下一个位置不是 [=15] 的父级=].我刚刚将 div 中的 #footer 移动到具有 position:relative; 的 id="container"，因此页脚将显示在底部。

因为页脚的字体颜色是白色，所以我刚刚添加了一个不同的虚拟图像来说明。

进一步参考可能有用：https://developer.mozilla.org/en-US/docs/Web/CSS/position

@font-face {
    font-family:'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local(OpenSans), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}
* {
    margin: 0;
    padding: 0
}
body {
    background: #f5f5f5;
    font-family:'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    height: 100%
}
a {
    text-decoration: none;
    color: #444
}
a:hover {
    color: blue
}
section {
    background: #000;
    box-shadow: 0 2px 2px #ebebeb
}
header {
    margin: 0 auto;
    text-align: center;
    position: relative;
    background: url(blackboardbg.jpg) 0 no-repeat;
    background-size: 100% 100%
}
nav li {
    display: inline-block;
    padding: 40px 30px 37px 0
}
nav li:nth-child(3) {
    padding-right: 200px
}
nav li:nth-child(4) {
    padding-left: 220px
}
.logo {
    background: url(images/logo.png) 50% 0 no-repeat;
    background-size: 300px 211px;
    width: 300px;
    height: 211px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 21px
}
#locator {
    position: absolute;
    visibility: show;
    left: 950px;
    top: 165px;
    z-index: 100
}
p {
    margin: 150px auto 0;
    width: 600px;
    text-align: center;
    font-size: 15px
}
#navmain {
    line-height: 30px;
    background-color: #eee;
    border: 1px solid #b9b9b9;
    border-radius: 5px;
    height: 300px;
    width: 200px;
    float: left;
    padding: 5px
}
#sectionblank {
    width: 60px;
    float: left;
    padding: 10px
}
#sectionmain {
    background-color: #eee;
    border: 1px solid #b9b9b9;
    border-radius: 5px;
    width: 700px;
    float: left;
    padding: 10px
}
#container {
    min-height: 100%;
    height: 100%;
    position: relative
}
#contentmain {
    width: 75%;
    margin: 0 auto
}
#content {
    padding: 10px;
    padding-bottom: 80px
    /* Height of the footer element */
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    /* Height of the footer */
    background: url(http://placekitten.com/g/500/60) 0 no-repeat;
    background-size: 100% 100%
}

<div id="container">
    <section>
        <header>
            <nav>
                <ul>
                    <li>
                        <img src="buttons/home.png">
                    </li>
                    <li>
                        <img src="buttons/about.png">
                    </li>
                    <li>
                        <img src="buttons/services.png">
                    </li>
                    <li>
                        <img src="buttons/gallery.png">
                    </li>
                    <li>
                        <img src="buttons/FAQ.png">
                    </li>
                    <li>
                        <img src="buttons/contact.png">
                    </li>
                </ul>
            </nav>
            <div class="logo"></div>
        </header>
    </section>
    <p></p>
    <div id="contentmain">
        <div id="locator">
            <img src="callnow.png" />
            <br>
        </div>test
        <br>test
        <br>test
        <br>test
        <br>test
        <br>test
        <br>test
        <br>test
        <br>test
        <br>test
        <br>test
        <br>test
        <br>test
        <br>test
        <br>test
        <br> <b>Categories</b>

        <br>
        <br> <i>Kids</i>

        <br>&larr; Frozen
        <br>&larr; Peppa Pig
        <br>&larr; My Little Pony
        <br>&larr; Mr Tumble
        <br>
         <h1>
                    Welcome
                </h1>

        <p>Welcome to Casper Creations</p>
    </div>
            
<div id="footer">
    <table style="width: 100%; height: 100%">
        <tr style="vertical-align: central">
            <td style="text-align: center; color:#FFFFFF; font-size: 12px"> <b>Special Offers | Advanced Search | Reviews | Create
                        an Account | Log In</b>

            </td>
        </tr>
    </table>
</div>
</div>

在我添加内容之前，在遵循教程到底部后页脚被定位？

Footer was posistioned after following tutorials to the bottom until I added content?

html

css

footer