| Autor | Zpráva | ||
|---|---|---|---|
| Kandown Profil |
#1 · Zasláno: 23. 5. 2012, 23:47:45 · Upravil/a: Kandown
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 |
#2 · Zasláno: 24. 5. 2012, 08:47:49
že by
width: 100%;
|
||
| candiess Profil |
#3 · Zasláno: 24. 5. 2012, 08:58:18
greeny:
„že by width: 100%;“ Joo a odkdy je Výška width :) |
||
| greeny Profil |
#4 · Zasláno: 24. 5. 2012, 09:41:15
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 |
#6 · Zasláno: 24. 5. 2012, 10:12:30
tak do něj musíš vždy vložit nějaký obsah, třeba na konec vlož
|
||
| candiess Profil |
#7 · Zasláno: 24. 5. 2012, 10:25:36
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 |
#9 · Zasláno: 25. 5. 2012, 19:06:14
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 |
#10 · Zasláno: 26. 5. 2012, 01:26:42
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). |
||
|
Časová prodleva: 12 let
|
|||
0