Footer Behind Content But Set Px Automatically
This is what I want: jsfiddle.net/zVLrb/ from: here But I do it by bootstrap, so I don't know-want to set the height as for example 200px but recognize aytomatically Thank for the
Solution 1:
Yes, it's possible, but you need some JavaScript.
Make a function (.accomodateFooter() in the example below) that gets the height of the footer and sets it as padding-bottom for the <body> (or whatever page wrapper with position:relative your layout might have - usually the direct parent of the footer), so your page contents do not get covered by the footer.
You will need to run this function on page load & resize events and also on footer DOMSubtreeModified.
Proof of concept:
jQuery(document).ready(function( $ ) {
$.fn.accomodateFooter = function(){
var footerHeight = $('footer').outerHeight();
$(this).css({'padding-bottom':footerHeight+'px'});
}
// adjust footer after it's html was modified
$('footer').on('DOMSubtreeModified', function(){
$('body').accomodateFooter();
})
// adjust footer when page loaded or resized. ideally, debounced.
$(window).on('load resize', function(){
$('body').accomodateFooter();
})
$('body').accomodateFooter();
window.feedFooter = function() {
var f = $('footer');
f.append($('<p />',{
text:"Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Throwup on your pillow sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."}))
.append($('<hr />'));
}
});body {
min-height: 100vh;
position: relative;
padding-top: 54px;
}
footer {
background-color: rgba(0,0,0,.65);
color: white;
position: absolute;
bottom: 0;
width: 100%;
padding: 1.5rem;
display: block;
}
footer hr {
border-top: 1px solid rgba(0,0,0,.42);
border-bottom: 1px solid rgba(255,255,255,.21);
}<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"crossorigin="anonymous"><scriptsrc="https://code.jquery.com/jquery-3.1.1.slim.min.js"integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"crossorigin="anonymous"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"crossorigin="anonymous"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"crossorigin="anonymous"></script><navclass="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse"><buttonclass="navbar-toggler navbar-toggler-right"type="button"data-toggle="collapse"data-target="#navbarsExampleDefault"aria-controls="navbarsExampleDefault"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><aclass="navbar-brand"href="#">Navbar</a><divclass="collapse navbar-collapse"id="navbarsExampleDefault"><ulclass="navbar-nav mr-auto"><liclass="nav-item active"><aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#">Disabled</a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="http://example.com"id="dropdown01"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">Dropdown</a><divclass="dropdown-menu"aria-labelledby="dropdown01"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><aclass="dropdown-item"href="#">Something else here</a></div></li></ul><formclass="form-inline my-2 my-lg-0"><inputclass="form-control mr-sm-2"type="text"placeholder="Search"><buttonclass="btn btn-outline-success my-2 my-sm-0"type="submit">Search</button></form></div></nav><divclass="container"><divclass="starter-template"><h1>Feed the footer - not a game (yet!)</h1><pclass="lead">You will notice the body bottom padding is growing to accomodate the height of the footer as you feed it (so the page contents do not get covered by it).</p><hr /><buttonclass="btn btn-warning"onclick="window.feedFooter()">Feed that footer</button><hr /><blockquoteclass="lead"><strong>Note:</strong> I used jQuery <code>v3.0.0</code> and Bootstrap <code>v4-alpha</code> but this is only a proof of concept. It will work on any version of Bootstrap. Cheers!</blockquote></div></div><footer>I am a footer with dynamic content.
<hr />
Post a Comment for "Footer Behind Content But Set Px Automatically"