Egyszerű responsive oldalfelépítés
- A body-n belül egy flex konténert helyezünk el, amelybe 3 gyermekelem kerül (header, main és footer).
- A flex konténert magassága egyenlő a képernyő magasságával, így a footer akkor is az oldal látható területének aljára kerül, ha kevés a tartalom.
1. Példa:
Forráskód
<head>
...
<style>
...
body {
margin:0;
padding:0;
}
.divOldal {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header,
footer {
background: #003838;
padding: 4px;
color: #fff;
text-align: center;
flex-shrink: 0;
}
footer {
margin-top: 20px;
}
main {
flex: 1 0 auto;
padding: 20px;
}
</style>
</head>
<!-- index.html -->
<body>
<div class="divOldal">
<header>
<h2>Fejléc</h2>
</header>
<main>
<h2>Tartalom</h2>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</p>
</main>
<footer>
<h2>Lábléc</h2>
</footer>
</div>
</body>
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: flexi_oldalfelepites.html