Die Fußzeile ist für verschiedene Bildschirme nicht richtig am unteren Rand der Seite positioniert.

Question

Wenn ich zwischen verschiedenen Auflösungsbildschirmen umschalte, wird die Fußzeile entweder oben oder unten positioniert, wodurch die Bildlaufleiste erscheint. Wie kann ich dieses Problem mit CSS beheben? Ich habe schon versucht, mehreren Posts zu folgen, aber ich bin mir nicht sicher, was genau ich falsch mache.

Code Reagieren:

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> 
     ); 

Fußzeilenkomponente

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

Hier ist eine einfache feste Fußzeile (es ist schwer, aus Ihrem Post zu sagen, wenn Sie möchten, dass ich t am Boden befestigt oder nicht). Die Hauptpunkte sind position: fixed, bottom: 0 und die Polsterung auf dem Container. Wenn Sie es nicht reparieren möchten, ersetzen Sie einfach fixed durch absolute

Auch wenn Sie flexbox verwenden können, gibt es eine 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>