頁腳在頁面底部的位置不正確

Question

當我在不同的分辨率屏幕之間切換時，頁腳位於底部或底部的上方，導致滾動條出現。我怎樣才能解決這個問題與CSS？我已經嘗試了幾個帖子，但我不確定我做錯了什麼。

陣營代碼：

return (
      <div> 
       <div className="container"> 
        <div id="logo"> 
         <img src={require('../../images/vidn_logo.png')} /> 
        </div> 
        {heading} 
        <form className="form-signin" onSubmit={this.formSubmit}> 
         <input onChange={this.setEmail} type="email" className="login-form-control" 
          autoComplete="email" placeholder="Email" required></input> 
         <input onChange={this.setPass} type="password" className="login-form-control" 
          autoComplete="new-password" placeholder="Password" required></input> 
         <button className="btn btn-lg btn-primary btn-block" 
          type="submit" style={{marginTop: '20px'}}>Log In</button> 
        </form> 
       </div> 
       <Footer /> 
      </div> 
     ); 

頁腳部分

const Footer = React.createClass({ 

    render: function() { 
     return (
      <div id="footer"> 
       <div id="footerText"> 
        <a href="">Privacy</a>All rights reserved<br /> 
        <a href="" 
         title="Support Contacts &amp; Procedures">Customer Support</a> 
       </div><br /> 
      </div> 
     ); 
    } 
}); 

的.css：

html { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     box-sizing: border-box; 
    } 

    *, 
    *:before, 
    *:after { 
     box-sizing: inherit; 
     margin: 0; 
     padding: 0; 
    } 
    body { 
     position: relative; 
     margin: 0; 
     background: #FBFCFE; 
     font-family: Arial, Verdana, Helvetica, sans-serif; 
     font-size: 11px; 
     color: #2B2B2B; 
     height: 100%; 
    } 
    div { 
     display: block; 
    } 
    .container { 
     width: auto; 
     height: 100%; 
     padding: 60px 0 100px; 
     text-align: center; 
    } 
    #footer { 
     margin-top: -100px; /* negative value of footer height */ 
     height: 100px; 
     clear:both; 
     color: #3f4209; 
     text-align: right; 
     background: #ccc9c9; 
    } 
    #footer div#footerText { 
     width: 99%; 
     padding: 10px 10px; 
    } 

Answer 1

這裏有一個簡單的固定尾（這是很難從您的文章告訴如果你想要我t固定在底部或不）。要點是position: fixed,bottom: 0和容器上的填充。如果您不希望它被修復，只需將fixed替換爲absolute

此外，如果您可以使用flexbox，則有一個really nice solution here。

body { 
 
    position: relative; 
 
} 
 
.container { 
 
    height: 100%; 
 
    padding-bottom: 100px; 
 
} 
 
#footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 100px; 
 
    background: #ccc9c9; 
 
}

<div class="container"> 
 
    <ol> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    </ol> 
 
</div> 
 
<div id="footer"> 
 
</div>