1

Atualmente tenho o seguinte código:

html, body, .content{
  height:100%;
}

nav {
  height: 15%;
  background-color: red;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,255,0,0.5);
}

main {
  color: white;
  background-color: blue;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
<div class="content">
  <nav>
    <p>Menu</p>
  </nav>
  <main>
    <p>content</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </main>
  <footer>
    <p>footer</p>
  </footer>
</div>

Porém, caso o texto do conteúdo seja muito grande:

html, body, .content{
  height:100%;
}

nav {
  height: 15%;
  background-color: red;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,255,0,0.5);
}

main {
  color: white;
  background-color: blue;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
<div class="content">
  <nav>
    <p>Menu</p>
  </nav>
  <main>
    <p>content</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a mattis ante, ut rhoncus lorem. Sed pretium viverra elit, id sollicitudin lacus congue eu. Nam mattis velit at velit vulputate ornare vitae quis metus. Nam tortor elit, dictum id pellentesque id, efficitur sed nulla. Donec justo ipsum, porttitor eget odio a, laoreet dictum sapien. Pellentesque mi elit, facilisis ac suscipit vel, elementum non nisl. Aliquam sit amet felis a eros sagittis semper. Vestibulum maximus tristique diam, scelerisque posuere quam fermentum a. Quisque vitae dolor a sapien pretium luctus. Curabitur consectetur consequat diam id pellentesque. Donec non laoreet ipsum, ac pharetra ex. Etiam a tellus turpis. Aliquam at magna laoreet, consequat massa in, fringilla lorem.</p>
  
  </main>
  <footer>
    <p>footer</p>
  </footer>
</div>

Há alguma forma de eu centralizar o conteúdo sem usar o conjunto position: absolute; top: 50%; transform: translateY(-50%);?

E Há alguma forma de fazer com que o footer fique alinhado no rodapé da página enquanto o conteúdo for pequeno e não crie barra de rolagem e que este fique abaixo do conteúdo quando tiver barra de rolagem?

3
  • E se você usar z-index:1; no footer para trazê-lo à frente? Commented 30/07/2018 às 14:52
  • Ele já está na frente, porem com transparência, para mostrar que tem conteúdo atras. Gostaria que ele ficasse abaixo, e não à frente
    – Pilati
    Commented 30/07/2018 às 14:53
  • Sugiro retirar o position:fixed Tenho uma página aqui que funciona assim e não tem o position informado, apenas o bottom:0. Commented 30/07/2018 às 14:56

2 Respostas 2

1

Vc consegue algo bem próximo do que quer apenas com flexbox

Fiz dois exemplos, esse modelo tem pouco conteúdo e o footer fica alinhado na base.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.content{
  height:100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

nav {
  width: 100%;
  height: 50px;
  background-color: red;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

footer {
  height: 50px;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,255,0,0.5);
  -ms-flex-item-align: end;
  align-self: flex-end;
}

main {
  color: white;
  background-color: blue;
  width: 100%;
  /* position: absolute;
  top: 50%;
  transform: translateY(-50%); */
}
<div class="content">
  <nav>
    <p>Menu</p>
  </nav>
  <main>
    <p>content</p>
  </main>
  <footer>
    <p>footer</p>
  </footer>
</div>


E nesse exemplo coloquei bastante conteúdo no <main> e vc pode ver que o footer ficou no final do conteúdo.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.content{
  height:100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

nav {
  width: 100%;
  height: 50px;
  background-color: red;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

footer {
  height: 50px;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,255,0,0.5);
  -ms-flex-item-align: end;
  align-self: flex-end;
}

main {
  color: white;
  background-color: blue;
  width: 100%;
  /* position: absolute;
  top: 50%;
  transform: translateY(-50%); */
}
<div class="content">
  <nav>
    <p>Menu</p>
  </nav>
  <main>
    <p>content</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam facere doloribus necessitatibus modi vitae, velit at commodi obcaecati reiciendis reprehenderit vel pariatur molestiae. Modi, ratione minus facere eveniet amet aliquam voluptate laborum debitis quos, quibusdam consequatur ab quo vel a iure adipisci culpa accusamus atque? A laudantium quod dolor, dolorem omnis molestias dignissimos in nulla vel ducimus quos impedit sunt temporibus corrupti suscipit sit iusto nemo adipisci nostrum magni eos, modi qui! Reiciendis, accusantium nam. Non nisi esse placeat id quae ducimus nihil quos doloremque aut dolore. Adipisci, earum explicabo fugit delectus obcaecati laborum, ab unde mollitia tenetur consectetur, cum impedit minus? Libero quasi quis voluptatem atque quibusdam odit magnam pariatur numquam consectetur ex, error sequi. Enim impedit laudantium eveniet odit iste praesentium inventore assumenda in ex? Rem ullam quibusdam soluta a ab consectetur, fugit incidunt eum placeat eos quos deserunt explicabo, obcaecati, aliquid enim? Tenetur officia aspernatur eaque est numquam? Qui, aut? Iste accusantium cum laudantium mollitia aspernatur facilis error quasi quis non consectetur fuga, nobis labore nisi dolor ipsum placeat tenetur eaque consequuntur excepturi ipsa nihil libero! Voluptate id sapiente esse voluptatum non, totam aspernatur dolorem provident cum tenetur alias cupiditate quis, ex minima libero cumque dolores asperiores.</p>

  </main>
  <footer>
    <p>footer</p>
  </footer>
</div>

5
  • isso funcionaria com o IE? vi que não tem um suporte muito bom
    – Pilati
    Commented 30/07/2018 às 16:39
  • @Pilati funciona do IE10 para frente. Não se preocupe com o IE 9, ele não representa 0,05% dos browser no brasil a não seu que seu cliente exija que funcione no IE9 (IE9 foi lançado em 2011) caniuse.com/#feat=flexbox Mas seria interessante usar os vendor prefix, como fiz na edição da resposta.
    – hugocsl
    Commented 30/07/2018 às 16:43
  • Consegui resolver o problema usando as classes flex do bootstrap
    – Pilati
    Commented 30/07/2018 às 17:52
  • Se tá no bootstrap acredito que tenha uma boa compatibilidade
    – Pilati
    Commented 30/07/2018 às 17:52
  • @Pilati sim está no Bootstrap a partir da versão 4. A versão 3 ainda usava a tecnica do float que foi abandonada na nova versão...
    – hugocsl
    Commented 30/07/2018 às 18:04
0

Coloca padding-bottom no body que resolve o problema do conteúdo grande, a questão de centralizar o conteúdo pelo que eu entendi você precisa de um padding nos elementos também

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 .