html - Sticky footer with variable height in bootstrap -
i trying sticky footer custom height on website , proving far more difficult had anticipated.
here screen shot of footer @ moment:
the footer covering contact form because have explicitly set height of 419 px.
on page content shorter screen footer sticks bottom fine... because have explicitly set height.
here css , html:
html { position: relative; min-height: 100%; } body { background: #ffffff; } body > .container { padding-bottom: 100px; } /* footer */ footer { position: absolute; bottom: 0; width: 100%; /* set fixed height of footer here */ height: 419px; background-color: #222; }<!-- latest compiled , minified css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- navigation --> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href=""> <img alt="" src=""> </a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li> <a class="" href=""> <i class="fa fa-home" aria-hidden="true"></i> home </a> </li> <li> <a class="" href=""> <i class="fa fa-certificate"></i> courses </a> </li> <li> <a class="" href=""> <i class="fa fa-lightbulb-o"></i> our method </a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li> <a class="sign-in" href=""> dashboard <i class="fa fa-tachometer"></i> </a> </li> </ul> </div> </div> </nav> <!-- end navigation --> <!-- main content --> <main> </main> <!-- end main content --> <!-- footer --> <footer> <div class="container-fluid bg-footer"> <div class="container"> <!-- footer menus --> <div class="row"> <div class="col-md-3"> <h3>about</h3> </div> <div class="col-md-3"> <h3>help</h3> <ul class="list-unstyled"> <li> <a href=""> go class </a> </li> <li> <a href=""> find order </a> </li> <li> <a href=""> courses </a> </li> <li> <a href=""> jobs </a> </li> <li> <a href=""> contact </a> </li> <li> <a href=""> </a> </li> </ul> </div> <div class="col-md-3"> <h3>social</h3> <ul class="list-unstyled"> <li> <h3> <i class="fa fa-facebook" aria-hidden="true"></i> </h3> </li> <li> <h3> <i class="fa fa-twitter" aria-hidden="true"></i> </h3> </li> <li> <h3> <i class="fa fa-vk" aria-hidden="true"></i> </h3> </li> </ul> </div> <div class="col-md-3"> <div class="form-group"> <a class="btn btn-alt btn-block" href=""> student login </a> </div> <div class="form-group"> <a class="btn btn-alt btn-block" href=""> teacher login </a> </div> </div> </div> <!-- end footer menus --> <hr> <!-- footer subtext --> <div class="row"> <div class="col-md-12"> <span class="text-muted"> high quality english lessons <div class="pull-right"> <a href="">privacy</a> | <a href="">terms , conditions</a> </div> </span> </div> </div> <!-- end footer subtext --> </div> </div> <!-- sub footer --> <div class="container-fluid bg-copyright"> <div class="container"> <p class="copyright"> © 2016 toucan-talk.com ltd </p> </div> </div> <!-- end sub footer --> </footer> <!-- end footer --> </body> </html>how make footer stick bottom of page a). without overlapping onto content , b). without having explicitly set height of footer.
in case recommend use flexbox. 1 big advantage of using flexbox don't need set specific height footer anymore.
you can achieve want changing css following
html, body { height: 100%; } body { background: #ffffff; display: flex; flex-flow: column; } footer { margin-top: auto; background-color: #222; }
Comments
Post a Comment