0

Estou usando em várias páginas o position sticky do html5 para dar um efeito no menu do site.

Mas tem páginas que o conteúdo interno é muito pequeno, não ocupa nem 150px de altura e acontece que não posso usar o rodapé com position fixed pois cobriria muito conteúdo nas outras páginas, por ter muita informação nele.

Então o que gostaria de fazer é um tipo de min-bottom assim como o min-height.

Utilizo bootstrap 4 beta para o front-end. Alguma dica?

nessa página preciso que

2 Respostas 2

2

Eu também tenho esse problema. A solução que uso é usar flexbox, um novo recurso do CSS3.

Basicamente, assim:

* {
  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>

No mais, se não estiver satisfeito com a proposta acima, deixo outras opções.

4
  • Vc testou se o flex não irá quebrar o grid do bootstrap?
    – Sam
    Commented 8/03/2018 às 2:58
  • Bom dia amigo. ontem não respondi que estava estudando ainda, vou testar hoje, mas pelo que vi na documentação do próprio bootstrap 4 incorporaram o flexbox. Pelos exemplos, vai dar certo sim, segue o link para alguém que use também: getbootstrap.com/docs/4.0/utilities/flex E muito obrigado!
    – Luiz
    Commented 8/03/2018 às 11:27
  • Testado. Seu código só funciona sozinho sem as classes do bootstrap, infelizmente, mas com o código do próprio bootstrap funciona se utilizar height: inherit herdando a altura 100% do html e body. Valeu.
    – Luiz
    Commented 8/03/2018 às 14:21
  • Olá. Creio que se o problema for sobrescrita de CSS, você pode usar a diretiva ! important. Para saber mais, veja aqui. Commented 8/03/2018 às 20:54
1

Uma opção é usar jQuery para que o rodapé fique sempre no bottom. Se a altura do rodapé couber na tela, ele ficará sempre no bottom, caso contrário ele ficará após, acompanhando normalmente os outros elementos.

Veja:

$(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>
   <div class="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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .