Jak nastavit výšku webových stránek podle rozlišení obrazovky?

Dobrý den,

dělám si vlastní web, ale teď jsem narazila na problém. Chci aby mé stránky nějak vypadali a tohle kazí jejich vzhled.

Stránky vypadají tak to: http://www.imgup.cz/image/0Nk. A ten problém se nachází hned dole u patičky. Pod ní se mi totiž při nedostatku textu objevuje nevzhledný bílý obdélník. A já nevím, jak se ho zbavit.

Zkoušela jsem v css nastavit jednomu z divů tento parametr: min-height: 555px; a ano, patička se mi na notebooku s rozlišením 1366 × 765 objevila dole a nevzhledný obdélník zmizel, když jsem přidala více textu, patička se mi posouvala a vše je OK (viz.: http://www.imgup.cz/image/0N9). Ale jde mi o to, že každý může mít nastavené jiné rozlišení obrazovky a to co teď funguje mě nebude fungovat u monitoru s rozlišením FullHD (1920 × 1080).

Proto se ptám, jde nějak v css nastavit, aby se výška stránek automacky přispůsobila rozlišení monitoru a neobjevoval se při nedostatku textu ten bílý obdélník a takhle http://www.imgup.cz/image/0N9 to vypadala pořád?

Děkuji

Uzamčená otázka

ohodnoťte nejlepší odpověď symbolem palce

Odpovědět

Zajímavá 0 před 3352 dny

Sledovat Nahlásit

Diskuze: 11 příspěvků, nejnovější před 3351 dny

Nejlepší odpověď

jpau

Odpoveď byla označena jako užitečná

Nastav height toho kontejneru, ve kterém je stránka na 100%, tím docílíš toho, že ti bude přetékat jen div s tím zápatím (jak je tam copyright).

Tomu divu (zápatí) nastav position: fixed a bottom: 0. Tím docílíš toho, že ten div s tím zápatím bude vždy dole jen bude překrývat kontejner s tělem té stránky (ten jak má 100% – viz 1. odstavec). Takže změníš jeho height na 100% – div zápatí height. Tzn. pokud má zápatí 30px tak height kontejneru stránky (tzn. toho kde je vše) bude height: 100% – 30px.

Takhle se to dá udělat. Samozřejmě nevidím tu statiku k tomu (HTML) takže nedovedu říct jestli to půjde konkrétně takhle ale ten princip je z toho myslím jasný.

Vyrešeno:

Ty dva spodni divy „paticka“ a „duezite“ si prehod do jeste jednoho divu, budu mu rikat „novy“

novy
{
position: fixed;
width: 100%;
height: 70px;
bottom: 0px;
}

To, co mas nyni v body prehod do divu asi takto:
<body>
<div class=„obal“></div>
<div class=„obsahBody“>Sem prijde co je v body</div>
<div class=„novy“></div>
</body>

obsahBody
{
top: 85px; /*priblizne sirka divu obal*/
height: calc(100% – 70px); /*Celkova sirka – vyska spodniho panelu novy*/
}

Upravil/a: jpau

1 před 3352 dny

1 Nominace Nahlásit

Další odpovědi

Lamalam

CSS slouží ke stylování a nemá žádnou fci nebo metodu, která by dovedla zjistit rozlišení konkrétní obrazovky. Tvůj problém by se asi dal vyřešit pomocí „position“.

Upravil/a: Lamalam

1 před 3352 dny

0 Nominace Nahlásit

SickBreed

Ne že bych uměl CSS, ale nelze min-height: Auto, nebo min-height: 100% ? Každopádně pokud umíš CSS tak si vygoogli heslo css auto height div nebo auto height container a ukáže ti to příkladů jak o udělat dost.

0 před 3352 dny

0 Nominace Nahlásit

Diskuze k otázce

ivzez

Mám ještě připomínku:

Jestli chceš psát o tvorbě stránek, nebo tvorbu stránek dokonce nabizet, neměl by tvůj web působit jako šablona a měl by být bez chyby. Neměla bys opomíjet sémantiku, přístupnost a kontrast (máš dost světlé písmo) apod.

před 3351 dny Odpovědět Nahlásit

ivzez

Podle rozlišení monitoru se nesnaž nic nastavit,
protože každý návštěvník může mít rolišení jiné.

S tím „min-height“ jsi na správné cestě. Pročti si, jak „patičku webu stále dole“
vyřešil před 10 lety Plaváček (Miloslav Lešetický): http://weblog.plavacek.net/2005-02.html
[druhý článek shora]

před 3351 dny Odpovědět Nahlásit

nikolqa.o

Tak tady je HTML stránky http://www.nikola-zkusebni.tode.cz/webove-doplnky.html. Omlouvám se, že mi to trvalo tak dlouho, ale do teď jsem používala Free hosting od ic.cz, ale ten teď zrušili a na Endoře mi chvíli trvalo se zorientovat.

před 3352 dny Odpovědět Nahlásit

jpau

Ty dva spodni divy „paticka“ a „duezite“ si prehod do jeste jednoho divu, budu mu rikat „novy“

novy
{
position: fixed;
width: 100%;
height: 70px;
bottom: 0px;
}

To, co mas nyni v body prehod do divu asi takto:
<body>
<div class=„obal“></div>
<div class=„obsahBody“>Sem prijde co je v body</div>
<div class=„novy“></div>
</body>

obsahBody
{
top: 85px; /*priblizne sirka divu obal*/
height: calc(100% – 70px); /*Celkova sirka – sirka spodniho panelu novy*/
}

před 3352 dny Odpovědět Nahlásit

nikolqa.o

Teď mi ještě uživatel Poklička poslal do zpráv toto:

#paticka {
width: 100%;
height: 20px;
margin: 0 auto;
padding: 9px 0;
text-align: center;
background-color: #000;
color: #fff;
position: fixed;
bottom: 0;
}

A to také funguje.

před 3351 dny Odpovědět Nahlásit

nikolqa.o

Funguje to. Děkuji moc.

Jinak nevíte prosím o nějakém dobrém Free hostingu? Na Endoru se teď nemohu přes FTP (v PSPadu) přihlásit. Webzdarma zase nepodporuje nahrávání souborů přes jejich server a nahrávat obrázky přes FTP mi nejdou.

Zlaté ic.cz, které teď bohužel zrušilo Free hosting. :(

před 3351 dny Odpovědět Nahlásit

jpau

Přestaň mi vykat.

Free web hostingy znám jen ic a wz. Pak existovalo ještě něco jako sweb ale to bylo k ničemu, nevím jak je to teď. Weby dělám jen „s pistolí u hlavy“ a když už na to tedy dojde tak většinou píšu věci co běhají na privátních sítích takže nemám moc zkušenosti s hostingem. Zkusil bych se podívat na to, co nabízí zahraniční společnosti.

před 3351 dny Odpovědět Nahlásit

Lamalam

Bez kódu tvé stránky se to nedá vyřešit. Obrázek stránky je k ničemu. Někam tu stránku nahraj o hoď sem odkaz.

před 3352 dny Odpovědět Nahlásit

nikolqa.o

SickBreed: Ani jedno z uvedených nefunguje, to už jsem zkoušela včera. Jinak už googlím 3 dny a ne a ne něco najít.

před 3352 dny Odpovědět Nahlásit

Lamalam

Možná by stačilo patičce nastavit clear: both;

před 3352 dny Odpovědět Nahlásit

nikolqa.o

To tam mám.