Avatar uživatele
Pokročilý

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/…. 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 x 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/…. 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 x 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/… to vypadala pořád?

Děkuji

Uzamčená otázka – ohodnoťte nejlepší odpověď symbolem palce.

Nejlepší odpověď

Odpoveď byla označena jako užitečná
Avatar uživatele
Bronzový

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*/
}

 

Další odpovědi:

Avatar uživatele
Zlatý

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".


Avatar uživatele
Pokročilý

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.

 

Diskuze k otázce

Avatar uživatele
Stříbrný

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.

Avatar uživatele
Stříbrný

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/…
[druhý článek shora]

Avatar uživatele
Pokročilý

nikolqa.o

Tak tady je HTML stránky http://www.nikola-zkusebni.tod e.cz/…. 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.

Avatar uživatele
Bronzový

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*/
}

Avatar uživatele
Pokročilý

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.

Avatar uživatele
Pokročilý

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. :(

Avatar uživatele
Bronzový

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.

Avatar uživatele
Zlatý

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.

Avatar uživatele
Pokročilý

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.

Avatar uživatele
Zlatý

Lamalam

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

Avatar uživatele
Pokročilý

nikolqa.o

To tam mám.

 

Přihlásit se

Položte otázku, odpovězte, zapojte se, …

začněte zde

Reklama

Kvalitní odpovědi v: Počítače a internet

Zlatý Bedy 1525
Zlatý Michal Kole 1198
Zlatý mosoj 1028
Zlatý Hlada 949
Zlatý ge0rge 894
Zlatý www 829
Zlatý led 819
Zlatý badisko 818
Zlatý gecco 795
Zlatý arygnoc 674

Zobrazit celkový žebříček

Facebook

 

Váš požadavek se vyřizuje, počkejte prosím.