Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<!DOCTYPE html> <meta charset="UTF-8"> <div class="container"> <div class="nav"> <div class="cell"> <p>Výška prispôsobivá obsahu</p> </div> </div> <div class="content"> <div class="cell"> <div> <p>Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum. </p> <p>Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum. </p> </div> </div> </div> <div class="footer"> <div class="cell"> <p>Výška prispôsobivá obsahu</p> </div> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
html, body { height: 100%; margin: 0; overflow-x: hidden; } .container { display: table; height: 100%; margin: 0 -5px; border-spacing: 5px; } .nav, .content, .footer { display: table-row; } .nav, .footer { position: relative; top: -5px; } .footer { top: auto; bottom: -5px; } .cell { display: table-cell; } .nav .cell, .footer .cell { background-color: #1565C0; } .content .cell { height: 100%; /* Nutné, aby obsah dominantne zaberal všetko voľné miesto. */ } .content .cell > div { width: 80%; height: 100%; margin: auto; border: 1px solid; box-sizing: border-box; } .cell p { padding: 1em; margin: 0; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>