页脚在页面底部的位置不正确

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>