Ciao, in genere flexbox può essere una valida soluzione in situazioni del genere ma è possibile risolvere anche in altri modi.
Se header non ha altezza fissa si può usare position:sticky con una cosa di questo tipo:
codice HTML:
<!DOCTYPE HTML>
<html lang="it">
<head>
<title>Esempio</title>
<style>
html, body {
margin: 0;
}
header {
position: sticky;
top: 0;
background: tomato;
}
main {
padding-bottom: 20px; /* come altezza footer */
}
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
background: gold;
}
</style>
</head>
<body>
<header>
HEADER Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis nibh sit amet mi elementum semper.
</header>
<main>
MAIN Quisque suscipit sem non est eleifend consectetur. Suspendisse malesuada massa lorem, id pharetra arcu iaculis a.
Aliquam in dolor vitae purus interdum vulputate vel ac augue. Nulla congue vehicula purus eget scelerisque.
Nullam suscipit metus id sem eleifend, ut molestie eros dictum. Curabitur faucibus urna nec ullamcorper pharetra.
Nunc eget lacus at arcu scelerisque gravida ut non lectus. Donec sit amet felis in justo hendrerit ornare eu sed risus.
Fusce suscipit, eros id cursus suscipit, urna orci ullamcorper velit, sed ultricies mauris enim sed quam.
Sed nibh ante, tempor ac eleifend non, sodales a massa. Phasellus ornare elementum semper.
Maecenas ullamcorper libero ex, eleifend porttitor lacus convallis a.
</main>
<footer>
FOOTER
</footer>
</body>
</html>
Vedi se ti può andare bene. Fai sapere.
PIERCHI 
Rispondi quotando
Originariamente inviata da graffithouse
humm spè
