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?
z-index:1;
no footer para trazê-lo à frente?position:fixed
Tenho uma página aqui que funciona assim e não tem o position informado, apenas obottom:0
.