Autor Zpráva
Kandown
Profil
Dobrý deň, chcel by som sa spýtať, ako sa dá nastaviť, výška divu v závislosti od okna. Mám prázdnu stránku a sú v nej len dva divy - leftbar a rightbar. Leftbar bude mať šírku 250px, floatovať doľava a výšku na celé okno a rightbar bude mať šírku zbytok okna (neurčené priamo), ale bude posunutá o 250px doprava (od ľavého okraju)

* {
    margin: 0;
    padding: 0;
}

#left_bar {
    background-color: #E5E5E5;
    width: 250px;
    float: left;
    height: 250px;
}

#right_bar {
    background-color: #F5F5F5;
    position: relative;
    left: 250px;
    height: 250px;

<body>
    <div id="left_bar"></div>
    
    <div id="right_bar"></div>
</body>

}

Ako mám ale nastaviť výšku divu na celé okno? Každý môže mať iné rozlíšenie pri prezeraní stránky, ale chcem, aby sa ten div zobrazoval od vrchu až po spodok stránky. Ďakujem.


Niečo na takýto spôsob

https://chrome.google.com/webstore/category/home?hl=sk&utm_source=chrome-ntp-launcher
greeny
Profil
že by width: 100%;
candiess
Profil
greeny:
že by width: 100%;
Joo a odkdy je Výška width :)
greeny
Profil
tak height no, sem trochu mimo :D
Kandown
Profil
To je síce fajn, ale to mi nepomohlo a tiež ma to napadlo.. Ono Pokiaľ je ten div prázdny, tak sa ani nezobrazuje v podstate.. a ja chcem aby bol štandardne na celú výšku okna prehliadačka.. a pokiaľ by bol obsah dlhší, nech sa predĺži.. niečo ako min-height: 100%, ale ani to nefunguje..
greeny
Profil
tak do něj musíš vždy vložit nějaký obsah, třeba na konec vlož &nbsp;
candiess
Profil
Kandown:
To je síce fajn, ale to mi nepomohlo a tiež ma to napadlo..
Pak můžeš jako já, začít Googlovat pod klíčovými slovy ,,height 100%" a vyjede ti tucty řešení na různých fórech, třeba jako tohle
Trejpa
Profil
Kandown:
Výška 100% se musí z něčeho odvodit, obvykle se tak děje z elementů body a html.
html, body, #right_bar, #left_bar { height: 100%; }
#left_bar {
    background-color: blue;
    width: 250px;
    float: left;
}
#right_bar {
    background-color: green;
    margin-left: 250px;
}


Nesnažíš se touto divnou metodou stavět rozvržení stránky, že ne? Takhle hloupě se to totiž nedělá, protože CSS nemá nástroj na to, aby zajistilo natažení jednoho sloupce podle rozměru jiného. Normální je žádnou výšku nezadávat a případné pozadí sloupečků simulovat jedním svisle opakovaným obrázkem na pozadí obalujícího bloku, tady třeba na značce body. Místo prvního řádku v kódu výše: body { background: #ccc url(sloupecky.png) left top repeat-y; }, samostatná pozadí obou sloupců smazat. V tomto případě může být obrázek 250 px široký proužek simulující jen levé pozadí, o zbytek se postará zadaná barva.

Jednoduché schéma stránky
Dvousloupcový beztabulkový layout
Dvousloupcový layout - Google
Kandown
Profil
A čo keby som to chcel tak, že ľavá strana bude fixne daná na 100% výšky okna prehliadača, tam by som dal napríklad menu, a pravá strana by sa naťahovala podľa textu? ľavá strana by v podstate bola statická a nehýbala by sa a hýbala by sa len pravá strana.. To by asi bolo najlepšie riešiť cez jQuery a vždy tomu nastaviť výšku podľa okna prehliadača, či?
Trejpa
Profil
Kandown:
ľavá strana bude fixne daná na 100% výšky okna prehliadača
A kolik bude 100 % doopravdy? Na monitoru 1000 px, na mé čtečce nebo tabletu 500 px a na telefonu třeba 200 px. To ti na menu stačí?

ľavá strana by v podstate bola statická a nehýbala by sa
Na to slouží position: fixed (v IE 6 to sice nefunguje, ale lze to jednoduše doskriptovat nebo nahrazovat za position: absolute).

To by asi bolo najlepšie riešiť cez jQuery a vždy tomu nastaviť výšku podľa okna prehliadača, či?
Ale jistě, jQuery (246 kB) dokáže i to, na co by v tomto případě stačil jeden obrázek (0,1 kB) a pár řádků stylů (Pevný sloupec).

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: