Autor Zpráva
Lucyk
Profil
Prosím, už delší dobu se snažím najít řešení, kdy mám web s hlavičkou a patičkou (tmavě modré pruhy) a pokud není obsah (v červeném rámu) přes celou stránku, tak se mi patička (v mém případě pojmenováno jako "footer") automaticky umístí těsně pod obsah a pak zůstává dole volné místo.

Našla jsem zde řešení plavacka, kdy jsem zkoušela umístit Patičku (footer) "vždy dole". To se mi podařilo, ale pak se mi neroztáhl červený okraj obsahu (zůstalo mi tam volné místo).

Přikládám ukázku (je to nyní bez jakékoliv mé úpravy).

Dokázal by mi někdo poradit, co je nutné změnit, aby to fungovalo? Nebo jak to lze vyřešit jiným způsobem?

Děkuji
Mlocik97
Profil
Ja to reším skrz min-height: calc ()
Calc bude obsahovať hodnoty 100% - veľkosť ďalších viditelných prvkov mimo obsahu.

Viď moj priklad: web layout
Kde si mozete pozriet obsah suboru index.html style.css a vyslednu stranku
Keeehi
Profil
Mlocik97:
Ale fuj.
1) Málo kdy je potřeba, aby ten prvek byl reálně roztažený. Stačí když to tak vypadá a toho se dá většinou docílit vhodným pozadím jiných prvků.
2) Když už to chceš roztahovat, tak bych na to použil flex-box. Když se to správně napíše, tak to bude mít podobnou podporu v prohlížečích jako calc.
Mlocik97
Profil
Keeehi:
Čo je na tom fuj? Alebo teda aké je lepšie riešenie (vyslovene lepšie nie podobne dobré)? Náhodou to takto funguje veľmi dobre.
Ale ak tak mi môžeš poradiť aj lepšie, rad sa priučím :)


Alebo sa chcem spytať ohladom flex-box ake su jeho vyhody a nevyhody voci calc()
Kcko
Profil
Mlocik97:
Fuj je asi jen to, že calc má slabší podporu, tuším IE 9/10+. Flexbox na tom není o moc lépe (tuším ještě hůře).
Nicméně, abys to dělal takhle, tak musíš znáš výšku ostatních elementů, u Flexu nikoliv, ten to zařídí sám.

Co se týká Flexu: rjwebdesign.cz/blog/CSS/20161120-uzitecne-odkazy-k-vlastnosti-flexbox
Mlocik-sntb
Profil *
Kcko:
hmm, takže flexbox by mi vyrešil problém ten že mám napríklad nejaky element ktorý zaberá vždy inú veľkosť na výšku, a pod ňou stĺpec tak aby jeho veľkosť bola definovaná ako "zvyšok viditelného miesta na webstránke, tzv. 100% (veľkosť výšky okna prehliadača) - veľkosť elementu ktorého veľkosť sa ale vždy mení, a teda spolu so zmenou tohto elementu by sa menil aj daný stĺpec? To by sa mi bodlo. V tomto prípade ide o to že mám stránku horizontálne rozdelenú, a prvá časť je ešte rozdelená na ďalšie 2 časti, a jedna časť sa ukotvuje a druhá mizí skrz vrh okna prehliadača, teda veľkosť prvej časti sa môže meniť v rozmezí veľkosti súčtu oboch k veľkosti len druhého? Ale asi i tak bych radšej zostal u JS a druhú value bych definoval skrz JS a jQuery, zatial som postúpil sem:

function isInSection(section)
    {
        var top = $(window).scrollTop();
        var bottom = top + $(window).height();
         var elementTop = $(section).offset().top;
         var elementBottom = elementTop + $(section).height();
           return (bottom >= elementTop && top <= elementBottom);
   }



Mlocik-sntb:
A i to mi poradi párek v rohlíku


Mlocik-sntb:
teraz čítam Object moved
Keeehi
Profil
Mlocik-sntb:
Ale asi i tak bych radšej zostal u JS a druhú value bych definoval skrz JS a jQuery
Zase fuj. Když to jde řešit s CSS, tak do toho zbytečně netahej javascript.
Mlocik-sntb
Profil *
Keeehi:
jenže jak čtu tak řešení skrz CSS je jaksi nefunkčné pre každého 5-teho uživatele. (dobrá možno každého 10-teho)
Keeehi
Profil
Podpora je celkem srovnatelná.
caniuse.com/#search=flex
caniuse.com/#search=calc
Problémy může dělat hlavně IE (jak už to tak bývá), takže když si ohlídáš, že ten ti nedělá problémy, měl bys být v pohodě i jinde.
Lucyk
Profil
Mlocik97:
zkoušela jsem také použít min-height, ale nefungovalo mi to a pokud jsem tam dala třeba 100px, tak ano, na tohle to reagovalo. Nicméně asi to není nejvhodnější tam vrazit přímo nějakou hodnotu, protože ně všichni budou mít stejné rozlišení obrazovky.

Jak to tak vidím, asi se budu muset spokojit s tím, že tam bude volné místo, a nebo tam nebude rámeček, ale nějaký "barevný" pás mezi hlavičkou a patičkou. Včera se mi také nepodařilo vygooglit něco, co by mě posunulo dále.
Kcko
Profil
Lucyk:
Mrkni na základní flex layout, třeba Ti to pomůže lab.rjwebdesign.cz/flex
Případně lepší podpora bez flexu codepen.io/griffininsight/pen/OMexrW
Mlocik97
Profil
Lucyk:
Na ktorom prehliadači ste to testovali? calc() jde vo vätšine... viď i na mojej stránke, cez devtool napr. V chromu si do obsahu mozete furt neco pridavat a uvidite to lip, ataci dat neco do päty a do obsahu. Uvidite ze ked obsah prikratky na scrolling tak je päta furt dole ak je dlhší tak sa päta posúva za obsah tak že po nascrollovaní úplne nadol mate pätu zase na spodku stranky.
Nemusi byť pevná veľkosť, skuste napsať:


div#obsah {
height: calc( 100% - 50px )
}

Treba dodržať v calcu medzere v zatvorke hlavne hodnota medzera minus medzera hodnota ak nieje medzera tak calc to nebere ako operaciu ale ako hodnoti (zaporna hodnota). A teda v px zadate cislo sučtu height päty a pripadne dalších divov nad obsahom (napr. Hlavička a/alebo menu). Samozrejme selector upravite podla svojho.
Tomáš123
Profil
Lucyk:
zkoušela jsem také použít min-height, ale nefungovalo mi to
Pre funkčnosť percentuálnych hodnôt je v prípade tejto CSS vlastnosti nutné, aby mali všetky nadradené prvky nastavenú výšku.
Väčšinou stačí deklarovať:
html, body {
  height: 100%;
}

Asi najlepšiu možnú podporu (od IE8) pre tieto požiadavky ide dosiahnuť tabuľkovými hodnotami vlastnosti display*. V prípade nepodpory je obsah stále dobre čitateľný a dostupný.

*Nevýhodou je nemožnosť nastavenia vonkajšieho okraja. Bunky tabuľky ide odsadiť pomocou CSS vlastnosti border-spacing. Neželané odsadenie zo strán ide kompenzovať záporným marginom obalového prvku (elimináciu horizontálneho posuvníka zabezpečí overflow: hidden) – živá ukážka.
Lucyk
Profil
Tomáš123:
Děkuji za vysvětlení a ukázku. Našla jsem podobný css kód pro toto řešení a ten Tvůj se mi zdá přehlednější. Asi se spokojím s tím, že to předělám do něj.

Pochopila jsem správně, že pokud bych chtěla content mít třeba z levé strany a pravé strany trochu užší než je hlavička a patička, tak to nelze? Pokud jsem zkoušela měnit nějaké hodnoty, tak se mi automaticky odsadila i hlavička s patičkou.
Tomáš123
Profil
Lucyk:
Pochopila jsem správně ...
Z toho čo som napísal áno, ale nejako to ide.

Problém je tam stále s vlastnosťou border-spacing, ktorá odsadí aj hlavičku zhora. Celkom funkčne vyzerá hlavičku a pätu relatívne napoziciovať a trochu posunúť.

Ak by existovalo niečo ako box-sizing: margin-box, nebol by problém situáciu vyriešiť elegantnejšie.

Tomáš123:
elimináciu horizontálneho posuvníka zabezpečí overflow: hidden
Vlastne overflow-x: hidden.
Lucyk
Profil
Tomáš123:
Děkuji za úpravu, zkusím do obou řešení nasadit obsah (jak s odsazením ze stran, tak bez nich) a který se mi bude zdát "na první dojem lepší" tak ten použiju.

Jen jsem ještě chtěla poprosit s pomocí o úpravu menu, které se snažím asi týden nějakým způsobem přizpůsobit svým požadavkům, ale ani na základě různých typů menu na internetu se mi toho nedaří docílit.

Aktuální stav menu mám tento. Neboť zkouším mít na jednom řádku jak logo, tak i linky a vyhledávací box. Vždy jsem našla jen řešení typu, že se jeden element dal zarovnat vlevo a druhý vpravo, ale se třemi už tápu, jak na to.

V mé současné ukázce se mi nedaří nyní upravit to, aby zelené pozadí (je tam jenom pro ilustraci, abych věděla, zda se mi podařilo dosáhnout mého zamýšleného efektu) bylo všude stejně vysoké. A zároveň když klikneš na položku třeba "About", aby byla modrá barva přes celou výšku "buňky" a nikoliv jen za textem na řádku.

Na tomto provedení menu se mi libí to, že ještě nemám přesně stanovený počet odkazů, takže pokud odkaz umažu, tak se celé menu tomu přizpůsobí a zarovná na střed. Možná jenom dotaz - jakou část kódu je nutné přidat a na které místo, aby buňky byly stejně široké?

Vím, že mi tam ještě trochu kazí "efekt" zarovnání buněk nalevo, ale přišla jsem na to, že tam změním původní kód:
.page-menu ul li a {
    color:white!important;
    padding:0 40px 0 0;
    text-decoration:none;
}

Nahradím řádek padding následujícím, neboť center mi nijak nefunguje:
.page-menu ul li a {
    color:white!important;
    padding:0 20px 0 20px;
    text-decoration:none;
}

Zkoušela jsem na různých místech v kódu měnit a nastavovat různé výšky a šířky řádků, abych dosáhla mnou výše požadovaného stavu, ale už si nevím rady, která část kódu mi to tam drží. Budu ráda, když se mi na to koukneš a příp. mi najdeš to kritické místo, proč se to tak chová, jak nechci.

Děkuji
Tomáš123
Profil
Lucyk:
Vždy jsem našla jen řešení typu, že se jeden element dal zarovnat vlevo a druhý vpravo, ale se třemi už tápu, jak na to.
V takom prípade síce je vyžadované špecifické poradie prvkov v kóde, ale situácia je riešiteľná, viď ukážka nižšie (samozrejme je to jedno z viacerých riešení s dôrazom na podporu, existujú iné varianty s horšou podporou a väčšou voľnosťou kódu).

jakou část kódu je nutné přidat a na které místo, aby buňky byly stejně široké?
V ukážke nižšie stačí položkám <li> nastaviť šírku.

Živá ukážka
Lucyk
Profil
Tomáš123:
Děkuji moc, podívám se na to a zkusím zakomponovat do stránky.

Ještě jsem narazila na jeden "zádrhel" se kterým si nevím rady, která část kódu to "drží".

Zkouším u této Ukázky docílit toho, že pokud je obsah stránky např. jen jedna věta, tak aby šířka zůstala zachována přes celou obrazovku. V tomto momentě se mi to vždy automaticky smrskne jen do velikosti dané věty.

Zkoušela jsem hledat chybu v těchto částech kódu, ale ničeho jsem nedocílila:

html, body {
    height: 100%;
    margin: 0;
}

.container {
    display: table;
    height: 100%;
    border-spacing: 10px;
    background-color: #E3F2FD;
}

Děkuji za radu.
Kcko
Profil
Lucyk:
nastav šířku 100%
Lucyk
Profil
Kcko:
Děkuji, funguje to. Nevím, kde jsem dělala chybu, ale i tuto možnost jsem zkoušela dříve, ale nefungovala. Možná jsem si už při experimentování šablonu rozhodila a už tam dělalo paseku i něco jiného.

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: