Menu
I got this code:
DEMO: http://jsfiddle.net/z21nz89d/2/
HTML:
<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container"> <p>Here comes some content.</p> <p>Here comes some content.</p> <p>Here comes some content.</p> <p>Here comes some content.</p> <p>Here comes some content.</p> </div> <footer> <div class="container"> <div class="row"> <div class="col-md-8"> <p>Some footer-content</p> <p>Some footer-content</p> <p>Some footer-content</p> </div> <div class="col-md-4"> <p>Some footer-content</p> <p>Some footer-content</p> </div> </div> </div> </footer> CSS:
footer { background-color: #eee; padding-top: 15px; padding-left: 15px; } It's kind of the very basic of what I have, but you'll get the point. As you can see the footer is positioned somewhere mid-air. I could position it absolute and make it sticky easily, but for various reasons I do not want that.
I want the footer to be BELOW the whole content (so to speak, listed as very last), however, if there's not enough content I need the footer to be placed at bottom: 0 and left: 0.
I have no idea how to accomplish this. My first guess would've been to use JavaScript to see how much space there is and whether the site is scrollable or not.
541
Quick answer: Add “display:flex; flex-direction:column; min-height:100vh;” to body or appropriate layout body element, then add “flex:1;” to content wrapper element/section.
If the height of the footer is unknown, it's best to use flex, something in the lines of:
<body> <header></header> <div class="content"></div> <footer></footer> </body> And for CSS only this is needed:
body { display: flex; min-height: 100vh; flex-direction: column; } .content { flex: 1; } And you don't need to set display:flex to body, it can be a wrapper inside the body too.
Keep in mind this might not work as expected on IE (see CanIUse link below). It works pretty good for most now though!
CanIUse link
See this link for an example.
179
This is the easiest way I have found to make a good footer. Wrap everything but your footer in a "wrapper" div. Then set your html and body height to 100%, with a min-height of 100% on your wrapper. Next, you need to give a bottom margin and bottom padding to this wrapper that is the same height as your footer. It works like a charm.
Demo here
html, body { height: 100%; } .wrapper { min-height: 100%; margin-bottom: -100px; padding-bottom: 100px; } footer { height: 100px; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
