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> <style> .obal { width: 200px; border: 1px solid red; } .divy { position: relative; padding: 10px 5px 45px; min-height: 200px; overflow: hidden; border: 1px solid gray; } .nahore { /*position: relative; Načo?*/ border: 1px solid green; } .dole { position: absolute; bottom: 0px; border: 1px solid blue; } </style> <div class="obal"> <div class="divy"> <div class="nahore"> Problém je vyriešený, nepoužívajte relatívne poziciovanie tam, kde nie je ptrebné. Dvojité obaľovanie obalom a divmi je kvôli peknému ráčeku taktiež zbytočné, ale ako chcete. Podstatou je spodný div absolútne napoziciovať na dno stránky a obľovaciemu divu (prvému rodičovi) pridať spodný padding o niečo väčší ako je výška spodného divu (väčší preto, aby tam bola medzera a bolo schopné to reagovať aj pri zmene rozlíšenia, teda zvýšeniu počtu riadkov v spodnej časti - na počte riadkov v hornej časti nezáleží). Z tohto riešenia teda vyplýva, že je funkčné iba v prípade, že poznáme výšku spodného divu. </div> <div class="dole"> dolni text nekolik slov v dolni casti </div> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>