I'm using the sticky position of html5 on several pages to make an effect on the site menu.
But it has pages that the internal content is very small, does not occupy even 150px in height and it happens that I can not use the footer with position fixed because it would cover a lot of content on the other pages,
So what I would like to do is a type of min-bottom as well as min-height .
I use bootstrap 4 beta for the front end. Any tips?
I also have this problem. The solution I use is to use flexbox , a new feature of CSS3.
Basically, like this:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
min-height: 100vh;
}
body {
display: flex;
flex-direction: column;
}
body > .main-content {
flex-grow: 1;
}
/** Estilos opcionais. */
.main-header {
background-color: #f1f1f1;
border-bottom: solid 1px #ddd;
padding: 20px;
}
.main-content {
padding: 20px;
}
.main-footer {
background-color: #333;
border-top: #303030;
padding: 20px;
color: #fff;
}<!DOCTYPE html>
<html>
<body>
<header class="main-header">
Seu cabeçalho.
</header>
<div class="main-content">
Seu conteúdo principal.
</div>
<footer class="main-footer">
Seu footer.
</footer>
</body>
</html>Furthermore, if you're not happy with the above proposal, I'll leave other options .
One option is to use jQuery so that the footer is always in the bottom . If the height of the footer fits on the screen, it will always be in bottom , otherwise it will be after, normally accompanying the other elements.
See:
$(window).on("load resize", function(){
let prev_h = $("#rodape").prev("*").outerHeight(true),
prev_o = $("#rodape").prev("*").offset().top,
foot_h = $("#rodape").outerHeight(true),
prevoh = prev_h+prev_o,
foot_m = 30; // margem superior do rodapé
if(window.innerHeight - prevoh - foot_m < foot_h){
$("#rodape").css({
"top": prevoh+foot_m +"px",
"bottom": ""
});
}else{
$("#rodape").css({
"top": "",
"bottom": "0"
});
}
});body{
margin: 0;
}
#rodape{
background: yellow;
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><header><divclass="container">
<div class="row">
<h2>Header</h2>
Malesuada fames ac turpis egestas integer. Mauris augue neque gravida in fermentum et sollicitudin. Ut tristique et egestas quis ipsum suspendisse ultrices gravida. Porttitor lacus luctus accumsan tortor. Et odio pellentesque diam volutpat. Gravida cum sociis natoque penatibus et magnis dis. Etiam non quam lacus suspendisse faucibus interdum posuere lorem ipsum. Cras pulvinar mattis nunc sed blandit libero volutpat.
</div>
</div>
</header>
<main>
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-12 col-md-auto">
Malesuada fames ac turpis egestas integer. Mauris augue neque gravida in fermentum et sollicitudin. Ut tristique et egestas quis ipsum suspendisse ultrices gravida. Porttitor lacus luctus accumsan tortor. Et odio pellentesque diam volutpat. Gravida cum sociis natoque penatibus et magnis dis. Etiam non quam lacus suspendisse faucibus interdum posuere lorem ipsum. Cras pulvinar mattis nunc sed blandit libero volutpat. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum.
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-12 col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
</main>
<div id="rodape">
<h2>Rodapé</h2>
Malesuada fames ac turpis egestas integer. Mauris augue neque gravida in fermentum et sollicitudin. Ut tristique et egestas quis ipsum suspendisse ultrices gravida. Porttitor lacus luctus accumsan tortor. Et odio pellentesque diam volutpat. Gravida cum sociis natoque penatibus et magnis dis. Etiam non quam lacus suspendisse faucibus interdum posuere lorem ipsum. Cras pulvinar mattis nunc sed blandit libero volutpat. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Morbi non arcu risus quis varius quam quisque. Tincidunt ornare massa eget egestas purus viverra. Eget mi proin sed libero enim sed faucibus. Fringilla est ullamcorper eget nulla facilisi etiam dignissim. Purus in massa tempor nec feugiat nisl pretium. Aliquam id diam maecenas ultricies mi eget mauris. Mauris sit amet massa vitae tortor condimentum. Vel quam elementum pulvinar etiam non quam lacus suspendisse. Et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Non diam phasellus vestibulum lorem sed. Venenatis cras sed felis eget velit aliquet.
</div>