页脚位于底部并带有水平线

Question

我试图将页脚放在底部，并在页脚上方有一条水平线。但我什至无法将页脚放在底部。尝试了很多帖子和博客，但我错过了一些东西。我正在使用一些博客的基础来创建注册页面。

小提琴

html

    <div id="header">

    </div>

    <div id="main"> 
    <div id="container">

  <form action="index.html" method="post">

    <p id="form_title" style='color:#808080'>Create an Account</p>

    <fieldset>
      <legend style="color:#585858">Get started with Your Profile</legend>
      <label for="name" style='color:#808080;font-size:14px'>CUSTOM NAME</label>
      <input type="text" id="name" name="user_name" style="color:#404040">


      <label for="type" style='color:#808080;font-size:14px'>TYPE</label>
      <select id="sel-type" name="type">

        <option value="frontend_developer">Front-End Developer</option>
        <option value="php_developor">PHP Developer</option>
        <option value="python_developer">Python Developer</option>
        <option value="rails_developer"> Rails Developer</option>
        <option value="web_designer">Web Designer</option>
        <option value="WordPress_developer">WordPress Developer</option>


    </select>
    <label for="type" style='color:#808080;font-size:14px'>REGION</label>
    <select id="sel-region" name="region">

        <option value="frontend_developer">Front-End Developer</option>
        <option value="php_developor">PHP Developer</option>
        <option value="python_developer">Python Developer</option>
        <option value="rails_developer"> Rails Developer</option>
        <option value="web_designer">Web Designer</option>
        <option value="WordPress_developer">WordPress Developer</option>


    </select>


    </fieldset>
    <button type="submit">Create Profile</button>
  </form>



    </div>

</div>

<div id="footer">
    <a href="About">About</a>
    <a href="info.com">Instructions</a>



<a href="tt.com">Encountered an issue?</a>  
</div>

CSS

*, *:before, *:after {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 }

body {
 font-family: 'Lato';
 background-color: #E8E8E8;

}

#header {
   width:100%;
   background-color: #27272D;
   height: 50px ;
   border:1px solid;
   position:relative;

}
#main{
   border:1px solid;

   width:100%;
   height:100%;
}

#container{

    margin-top: 100px;
    border:1px;
}

  form {
   max-width: 300px;
   margin: 10px auto;
   padding: 10px 20px;
   border-radius: 3px;
   background-color: white;
   border:1px;
     }

  #form_title {
    margin: 10px 0 30px 15px;
    font-size:20px;
   }

 input[type="text"],
 select {
   background: rgba(255,255,255,0.1);
   border: none;
   font-size: 16px;
   height: auto;
   margin: 0;
   outline: 0;
   padding: 15px;
   width: 100%;
   background-color: #e8eeef;
   color: #8a97a0;
   box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
   margin-bottom: 20px;
  }

   input[type="text"]{
      border-radius: 6px;
     -moz-border-radius: 6px;
     -khtml-border-radius: 6px;
     -webkit-border-radius: 6px;
     height:44px;
     font-size: 14px;
      }


  select {
   padding: 6px;
   height: 44px;
   border-radius: 2px;
  }

 button {

   color: #FFF;
   background-color: #13ABAF;
   font-size: 14px;
   text-align: center;
   font-style: normal;
   border-radius: 5px;
   width: 96%;
   height:44px;
   border: 1px solid;
   border-width: 1px 1px 3px;
   margin-bottom: 10px;
   margin-left: 10px;
   }

  fieldset {

    border: none; 
  }

  legend {
    font-size: 17px;
    margin-bottom: 24px;
  }

  label {
   display: block;
   margin-bottom: 8px;
  }

  label.light {
   font-weight: 300;
   display: inline;
  }



  #horizontal-line{ 

     display: block;
     margin-top:100px;
     margin-bottom: 60px;
     width:96%;
     margin-left: auto;
     margin-right: auto;
     border-style: inset;
     border-width: 1px;
     border-color: #F0F0F0;


     } 

    #footer {
     position : absolute;
     bottom : 0;
     height:60px;
     margin-top : 40px;
     text-align: center ;
     font-size: 10px ;
     font-family: 'Lato' ;
     }

    @media screen and (min-width: 480px) {

    form {
      max-width: 480px;
     }

 }

Answer 1

删除position: absolute您的风格：

#footer {
    position: absolute;
    /* ... */
}

小提琴：https://jsfiddle.net/lmgonzalves/750h2crz/2/