将页脚保持在底部

Question

我有个小问题。我已将页脚放在相对于正文的绝对底部，但是当我使用滚动条时，页脚不再粘在底部。

这是HTML

    <body>
<div id="top-line"></div>
<div id="header">
  <div class="wrapper">
    <div class="logo"> </div>
  </div>
</div>
<div id="menu">
  <?php include 'menu.php';?>
</div>
<div class="wrapper">
  <div id="content">
    <div id="applybox">
  <form action = "" method = "post">
    <label>Firstname</label>
    <input class="inputfield" type = "text" name = "firstname" placeholder="E.g. Srinivasa" />
    <label>Lastname</label>
    <input class="inputfield" type = "text" name = "lastname" placeholder="E.g. Ramanujan" />
    <label>Age</label>
    <input class="inputfield" type = "number" name = "password" min="16" max="40" />
    <label>Gender</label>
    <select class="inputfield" name="gender">
        <option value="">Select...</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
    </select>
    <label>Origin</label>
    <select class="inputfield" name="origin">
        <option value="">Select...</option>
        <option value="Caucasian">Caucasian</option>
        <option value="Asian">Asian</option>
        <option value="African">African</option>
        <option value="Latino">Latino</option>
    </select>
    <label>Describe your character's life up until current age.</label>
    <textarea class="inputfield" name="background" rows="5" cols="40" placeholder="The life of your character..."></textarea>
    <input class="applybutton" type = "submit" value = "File application"/>
  </form>
</div>
  </div>
</div>
<div id="footer">Copyright &copy; 2016 Degenraiderz. All rights reserved.</div>
</body>

这是 CSS

    /*===RESET===*/
html,body,p,div,img,h1,h2,h3,h4,h5,li,ul,ol,dl,dd,dt,a,form,pagele,td,tr,blockquote,iframe {
  margin:0px; 
  padding:0px; 
  border:0px; 
  border-collapse:separate;
  border-spacing:0px;
  text-decoration: none;
}

* :focus { outline: 0; }

ul {list-style: none;}

/*=================RESET COMPLETE========================*/

@font-face {
font-family: 'Bebas Neue';
font-style: normal;
font-weight: normal;
src: local('Bebas Neue'), url('/fonts/BebasNeue.woff') format('woff');
}

@font-face {
    font-family: 'open_sansregular';
    src: url('/fonts/OpenSans-Regular-webfont.eot');
    src: url('/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('/fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

html {
    height: 100%;   
    position: relative;
}

body {
    font-family: Arial,sans-serif;
    font-size: 12px;
    background: #555;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

a {
    text-decoration: none;  
}

#top-line {
    height: 8px;    
    background: #f1ebe0;
}

#footer {
    color: #F7F7F7;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #292c2f;
    height: 17px;
    border-top: 3px solid #f1ebe0;
    padding: 4px 0 2px 0;   
    text-align: center;
    clear:both;
}

#header {
    width: 100%;
    background: #292c2f;
    border-bottom: 3px solid #f1ebe0;
}

.headerbar {
    width: 100%;
}

#navigation {
    list-style: none;
    display: block;
    padding: 10px 0 10px 0;
    text-align:right;
}

#navigation li {    
    display: inline-block;
    position: relative;
}

#navigation li a {
    color: #e5e5e5;
    font-family: Bebas, Tahoma, Arial, sans-serif;
    font-weight: bold;
    font-size: 18px;
    padding: 10px 17px; 
    -webkit-transition: background-color .2s linear;
    -moz-transition: background-color .2s linear;
    -o-transition: background-color .2s linear;
    -ms-transition: background-color .2s linear;
    transition: background-color .2s linear;
}

#navigation li a.active {
    border-bottom: 3px solid #f1ebe0;
    background: #444;
    color: #F7F7F7;
}

#navigation li a:hover {
    color: #F7F7F7;
    background: #444;
    border-bottom: 3px solid #f1ebe0;
}

#menu {
    width: 100%;
    background: #292c2f;
    -webkit-box-shadow: 0px 7px 21px 0px rgba(50, 50, 50, 0.65);
    -moz-box-shadow:    0px 7px 21px 0px rgba(50, 50, 50, 0.65);
    box-shadow:         0px 7px 21px 0px rgba(50, 50, 50, 0.65);
}

#menu .wrapper {
    width: 1170px;  
    margin: 0 auto;
}

.wrapper {
    width: 1170px;  
    margin: 0 auto;
}

.logo {
    position: relative;
    min-height: 300px;
    background: url(/images/banner.png) center center no-repeat;
    background-size: cover;
}

#loginbox {
    color: #16325c;
    background: #CCC;
    width: 380px;
    height:300px;
    margin: 0 auto;
    margin-top: 50px;
    padding: 20px;
    font-family: Bebas, Tahoma, Arial, sans-serif;  
    border-radius: 5px;
    border: 1px solid #333;
}

.input {
    border: 1px solid #333;
    border-radius: 4px;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    background-color: #F9F9F9;
    font-family: open_sansregular, Arial, sans-serif;
    box-sizing: border-box;
    -webkit-appearance: none;
    font-size: 14px;
    transition: all 0.1s;   
    width: 100%;
    padding: 12px;
}

.user {
    margin-top: 8px;
    margin-bottom: 16px;    
}

.pass {
    margin-top: 8px;
    margin-bottom: 16px;    
}

.loginbutton {
    width: 100%;
    background-color: #E9D7AD;
    color: #16325c;
    transition: all 0.1s;
    border: 1px solid #999; 
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 14px;
    font-family: open_sansregular, Arial, sans-serif;
    cursor: pointer;
    background-image: none !important;
}

.loginbutton:hover {
    background-color: #f1ebe0;  
}

.remember {
    padding: 16px 0;
    position: relative;
    margin: 0px;
    font-size: 14px;    
}

.forgot {
    width: 100%;
    border-top: 1px solid #D8DDE6;
    color: #f1ebe0;
    padding-top: 10px;
    text-align: right;
}

#content {
    font-family: open_sansregular, Arial, sans-serif;
    margin-top: 10px;
    position: relative;
    text-align: justify;
    color: #e5e5e5;
}

#content .wrapper {
    margin-right: -2%;
}

.box {
    box-sizing: border-box;
    width: 23%;
    margin: 1%;
    float:left;
    display: inline-block;
    background: #999;
    border-radius: 5px;
    border: 1px solid #999; 
    padding: 10px;      
}

.box .content {
    overflow: hidden;
    font-size: 15px;
    display: inline-block;
    background: #999;
    border-radius: 5px;
    border: 1px solid #999; 
    padding: 10px;  
}
.box .title {
    height:30px;
    line-height:30px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: #666;
    font-size:18px;
    font-weight:bold;
    display:block;
    color:white;
    padding:10px;
    border: 1px solid gray;
    border-bottom:none;
}

.dropdown-content {
    z-index: 1;
    display: none;
    position: absolute;
    bottom: -135px;
    background: #292c2f;
    min-width: 202px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    padding: 12px 16px;
    display: block;
}

.dropdown:hover .dropdown-content {
    display: block;
}

nav {
    font-family: open_sansregular, Arial, sans-serif;
}

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;
    }

nav ul {
    list-style: none;
    display: inline-table;
    position: relative;
    padding: 0; 
    z-index: 1;
}
    nav ul:after {
        content: ""; clear: both; display: block;
    }

nav ul li {
    float: left;
    -webkit-transition: background-color .2s linear;
    -moz-transition: background-color .2s linear;
    -o-transition: background-color .2s linear;
    -ms-transition: background-color .2s linear;
    transition: background-color .2s linear;
}
    nav ul li:hover {
        background: #444;
    }
        nav ul li:hover a {
            color: #F7F7F7;
        }

    nav ul li a {
        display: block; padding: 15px 40px;
        color: #e5e5e5; text-decoration: none;
    }

nav ul ul {
    background: #292c2f; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
}
    nav ul ul li {
        float: none; 
        position: relative;
        min-width: 185px;
    }
        nav ul ul li a {
            padding: 15px 20px;
            color: #fff;
        }   
            nav ul ul li a:hover {
                background: #444;
                border-bottom: 3px solid #f1ebe0;
            }

nav ul ul ul {
    position: absolute; left: 100%; top:0;
}

#applybox {
    color: #16325c;
    background: #CCC;
    width: auto;
    height: auto;
    margin: 0 auto;
    margin-top: 50px;
    padding: 20px;
    font-family: Bebas, Tahoma, Arial, sans-serif;  
    border-radius: 5px;
    border: 1px solid #333;
}

.inputfield {
    display:block;
    border: 1px solid #333;
    border-radius: 4px;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    background-color: #F9F9F9;
    font-family: open_sansregular, Arial, sans-serif;
    box-sizing: border-box;
    -webkit-appearance: none;
    font-size: 14px;
    transition: all 0.1s;
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    margin-bottom: 16px;
}

.applybutton {
    width: 100%;
    background-color: #E9D7AD;
    color: #16325c;
    transition: all 0.1s;
    border: 1px solid #999; 
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 14px;
    font-family: open_sansregular, Arial, sans-serif;
    cursor: pointer;
    background-image: none !important;
}

.applybutton:hover {
    background-color: #f1ebe0;  
}

https://jsfiddle.net/introzen/g88mrg3m/

我做错了什么？我试过 height: auto;和底部填充：50px；在 Body 上，但在不使用滚动的页面上，页脚不在底部。

Answer 1

将页脚更改为 position: fixed

Answer 2

那是因为你的 body 得到了 height:100%;。因为元素高度始终参考其 parents 高度，所以它不会增长到您想要的大小。如果去掉高度，body会根据他的children.

计算自己的高度

删除 height:100%; 它将粘在屏幕的末尾。

如果您想让网站保持至少 100% 的高度，您可以使用 max-height:100%;。

Answer 3

使用 flex 你的 header/footer 可以动态增长并且仍将页脚保持在绝对底部

在下面的示例中，我添加了 container div，删除了页脚上的 position: absolute 和 updated/added 这 2 CSS 规则

.container {
    height: 100%;
    display: flex;
    flex-direction: column;
}    
.wrapper {
  flex: 1;
}

堆栈片段

/*===RESET===*/
html,body,p,div,img,h1,h2,h3,h4,h5,li,ul,ol,dl,dd,dt,a,form,pagele,td,tr,blockquote,iframe {
  margin:0px; 
  padding:0px; 
  border:0px; 
  border-collapse:separate;
  border-spacing:0px;
  text-decoration: none;
}

* :focus { outline: 0; }

ul {list-style: none;}

/*=================RESET COMPLETE========================*/

@font-face {
font-family: 'Bebas Neue';
font-style: normal;
font-weight: normal;
src: local('Bebas Neue'), url('/fonts/BebasNeue.woff') format('woff');
}

@font-face {
    font-family: 'open_sansregular';
    src: url('/fonts/OpenSans-Regular-webfont.eot');
    src: url('/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('/fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

html {
 height: 100%; 
 position: relative;
}

body {
 font-family: Arial,sans-serif;
 font-size: 12px;
 background: #555;
 height: 100%;
 margin: 0;
 padding: 0;
 position: relative;
}

.container {
 height: 100%;
    display: flex;
    flex-direction: column;
}

.wrapper {
  flex: 1;
}

a {
 text-decoration: none; 
}

#top-line {
 height: 8px; 
 background: #f1ebe0;
}

#footer {
 color: #F7F7F7;
 bottom: 0;
 width: 100%;
 background: #292c2f;
 height: 17px;
 border-top: 3px solid #f1ebe0;
 padding: 4px 0 2px 0; 
 text-align: center;
 clear:both;
}

#header {
 width: 100%;
 background: #292c2f;
 border-bottom: 3px solid #f1ebe0;
}

.headerbar {
 width: 100%;
}

#navigation {
 list-style: none;
 display: block;
 padding: 10px 0 10px 0;
 text-align:right;
}

#navigation li { 
 display: inline-block;
 position: relative;
}

#navigation li a {
 color: #e5e5e5;
 font-family: Bebas, Tahoma, Arial, sans-serif;
 font-weight: bold;
 font-size: 18px;
 padding: 10px 17px; 
 -webkit-transition: background-color .2s linear;
    -moz-transition: background-color .2s linear;
    -o-transition: background-color .2s linear;
    -ms-transition: background-color .2s linear;
    transition: background-color .2s linear;
}

#navigation li a.active {
 border-bottom: 3px solid #f1ebe0;
 background: #444;
 color: #F7F7F7;
}

#navigation li a:hover {
 color: #F7F7F7;
 background: #444;
 border-bottom: 3px solid #f1ebe0;
}

#menu {
 width: 100%;
 background: #292c2f;
 -webkit-box-shadow: 0px 7px 21px 0px rgba(50, 50, 50, 0.65);
 -moz-box-shadow:    0px 7px 21px 0px rgba(50, 50, 50, 0.65);
 box-shadow:         0px 7px 21px 0px rgba(50, 50, 50, 0.65);
}

#menu .wrapper {
 width: 1170px; 
 margin: 0 auto;
}

.wrapper {
 width: 1170px; 
 margin: 0 auto;
}

.logo {
 position: relative;
 min-height: 300px;
 background: url(/images/banner.png) center center no-repeat;
 background-size: cover;
}

#loginbox {
 color: #16325c;
 background: #CCC;
 width: 380px;
 height:300px;
 margin: 0 auto;
 margin-top: 50px;
 padding: 20px;
 font-family: Bebas, Tahoma, Arial, sans-serif; 
 border-radius: 5px;
 border: 1px solid #333;
}

.input {
 border: 1px solid #333;
    border-radius: 4px;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    background-color: #F9F9F9;
    font-family: open_sansregular, Arial, sans-serif;
    box-sizing: border-box;
    -webkit-appearance: none;
    font-size: 14px;
    transition: all 0.1s; 
 width: 100%;
 padding: 12px;
}

.user {
 margin-top: 8px;
 margin-bottom: 16px; 
}

.pass {
 margin-top: 8px;
 margin-bottom: 16px; 
}

.loginbutton {
 width: 100%;
 background-color: #E9D7AD;
    color: #16325c;
    transition: all 0.1s;
    border: 1px solid #999; 
 padding: 12px 24px;
    border-radius: 4px;
    font-size: 14px;
    font-family: open_sansregular, Arial, sans-serif;
    cursor: pointer;
    background-image: none !important;
}

.loginbutton:hover {
 background-color: #f1ebe0; 
}

.remember {
 padding: 16px 0;
 position: relative;
 margin: 0px;
 font-size: 14px; 
}

.forgot {
 width: 100%;
 border-top: 1px solid #D8DDE6;
 color: #f1ebe0;
 padding-top: 10px;
 text-align: right;
}

#content {
 font-family: open_sansregular, Arial, sans-serif;
 margin-top: 10px;
 position: relative;
 text-align: justify;
 color: #e5e5e5;
}

#content .wrapper {
 margin-right: -2%;
}

.box {
 box-sizing: border-box;
 width: 23%;
 margin: 1%;
 float:left;
 display: inline-block;
 background: #999;
 border-radius: 5px;
 border: 1px solid #999; 
 padding: 10px;  
}

.box .content {
    overflow: hidden;
    font-size: 15px;
 display: inline-block;
 background: #999;
 border-radius: 5px;
 border: 1px solid #999; 
 padding: 10px; 
}
.box .title {
    height:30px;
    line-height:30px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: #666;
    font-size:18px;
    font-weight:bold;
    display:block;
    color:white;
    padding:10px;
    border: 1px solid gray;
    border-bottom:none;
}

.dropdown-content {
 z-index: 1;
    display: none;
    position: absolute;
 bottom: -135px;
    background: #292c2f;
    min-width: 202px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    padding: 12px 16px;
    display: block;
}

.dropdown:hover .dropdown-content {
    display: block;
}

nav {
 font-family: open_sansregular, Arial, sans-serif;
}

nav ul ul {
 display: none;
}

 nav ul li:hover > ul {
  display: block;
 }

nav ul {
 list-style: none;
 display: inline-table;
 position: relative;
 padding: 0; 
 z-index: 1;
}
 nav ul:after {
  content: ""; clear: both; display: block;
 }

nav ul li {
 float: left;
 -webkit-transition: background-color .2s linear;
    -moz-transition: background-color .2s linear;
    -o-transition: background-color .2s linear;
    -ms-transition: background-color .2s linear;
    transition: background-color .2s linear;
}
 nav ul li:hover {
  background: #444;
 }
  nav ul li:hover a {
   color: #F7F7F7;
  }
 
 nav ul li a {
  display: block; padding: 15px 40px;
  color: #e5e5e5; text-decoration: none;
 }
 
nav ul ul {
 background: #292c2f; border-radius: 0px; padding: 0;
 position: absolute; top: 100%;
}
 nav ul ul li {
  float: none; 
  position: relative;
  min-width: 185px;
 }
  nav ul ul li a {
   padding: 15px 20px;
   color: #fff;
  } 
   nav ul ul li a:hover {
    background: #444;
    border-bottom: 3px solid #f1ebe0;
   }
   
nav ul ul ul {
 position: absolute; left: 100%; top:0;
}

#applybox {
 color: #16325c;
 background: #CCC;
 width: auto;
 height: auto;
 margin: 0 auto;
 margin-top: 50px;
 padding: 20px;
 font-family: Bebas, Tahoma, Arial, sans-serif; 
 border-radius: 5px;
 border: 1px solid #333;
}

.inputfield {
 display:block;
 border: 1px solid #333;
    border-radius: 4px;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    background-color: #F9F9F9;
    font-family: open_sansregular, Arial, sans-serif;
    box-sizing: border-box;
    -webkit-appearance: none;
    font-size: 14px;
    transition: all 0.1s;
 width: 100%;
 padding: 12px;
 margin-top: 8px;
 margin-bottom: 16px;
}

.applybutton {
 width: 100%;
 background-color: #E9D7AD;
    color: #16325c;
    transition: all 0.1s;
    border: 1px solid #999; 
 padding: 12px 24px;
    border-radius: 4px;
    font-size: 14px;
    font-family: open_sansregular, Arial, sans-serif;
    cursor: pointer;
    background-image: none !important;
}

.applybutton:hover {
 background-color: #f1ebe0; 
}

<div class="container">
  <div id="top-line"></div>
  <div id="header">
    <div class="wrapper">
      <div class="logo"> </div>
    </div>
  </div>
  <div id="menu">
    <?php include 'menu.php';?>
  </div>
  <div class="wrapper">
    <div id="content" style="">
      <div id="applybox">
        <form action = "" method = "post">
          <label>Firstname</label>
          <input class="inputfield" type = "text" name = "firstname" placeholder="E.g. Srinivasa" />
          <label>Lastname</label>
          <input class="inputfield" type = "text" name = "lastname" placeholder="E.g. Ramanujan" />
          <label>Age</label>
          <input class="inputfield" type = "number" name = "password" min="16" max="40" />
          <label>Gender</label>
          <select class="inputfield" name="gender">
            <option value="">Select...</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
          </select>
          <label>Origin</label>
          <select class="inputfield" name="origin">
            <option value="">Select...</option>
            <option value="Caucasian">Caucasian</option>
            <option value="Asian">Asian</option>
            <option value="African">African</option>
            <option value="Latino">Latino</option>
          </select>
          <label>Describe your character's life up until current age.</label>
          <textarea class="inputfield" name="background" rows="5" cols="40" placeholder="The life of your character..."></textarea>
          <input class="applybutton" type = "submit" value = "File application"/>
        </form>
      </div>
    </div>
  </div>
  <div id="footer">Copyright &copy; 2016 Degenraiderz. All rights reserved.</div>
</div>

将页脚保持在底部

Keeping footer at bottom

html

css

footer