javascript - Footer is not positioned properly on the bottom of the page for different screens -


when switch between different resolution screens, footer gets positioned either upper bottom line or lower causing scrollbar appear. how fix issue css? i've tried following several posts, i'm not sure i'm doing wrong.

react code:

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

footer component

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

here's simple fixed footer (it's hard tell post if want fixed bottom or not). main points position: fixed, bottom: 0 , padding on container. if don't want fixed, replace fixed absolute

also, if can use flexbox there 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>


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -