Diskuze: Footer vzdy prilepenej dole

HTML a CSS HTML a CSS Footer vzdy prilepenej dole American English version English version

Avatar
BlugW
Redaktor
Avatar
BlugW:

Hoj,

chtěl bych se zeptat.
Už mám z toho nervy. Může mi někdo poradit, jak udělat aby footer byl vždy dole, protože prohledal jsem google, zkoušel různé způsoby, ale footer, mi footer nedrží dole. Buď když je na stránce málo obsahu tak drží dole, ale když je víc a je potřeba trochu proscrollovat tak už je pod ním cca 200-300px, mezera.

Chtěl jsem najít základní layout (header,conten­t,footer) který už je nastylovan aby držel header a footer kde ma, ale nic nenašel :D

Footer vždy řeším ručně pomoci margin atd.. což už mě nebaví :D

Díky předem.

Editováno 10.7.2014 2:48
Odpovědět 10.7.2014 2:47
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
Avatar
Jan Vargovský
Redaktor
Avatar
Odpovídá na BlugW
Jan Vargovský:

Do webů nedělám, ale první odkaz z googlu

http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

Každopádně to, že je content stránky na 2 řádky není moc běžné, takže bych to asi nepoužíval.

Editováno 10.7.2014 3:11
 
Nahoru Odpovědět  +1 10.7.2014 3:09
Avatar
BlugW
Redaktor
Avatar
Odpovídá na Jan Vargovský
BlugW:

Na tohle jsem se koukal taky, ale ono mi to když má stránka několik řádku tak ten footer drží dole, ale když pak dam trochu víc, a proscrolluju, tak footer už je několik stovek pixelu nad místem kde by měl být. :(

PS: I když možná jsem to špatně opsal, zkusím to znovu.

Editováno 10.7.2014 9:57
Nahoru Odpovědět 10.7.2014 9:56
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Michal Vašíček:
position: fixed;
bottom: 0;

? :)

Nahoru Odpovědět 10.7.2014 9:58
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
BlugW
Redaktor
Avatar
Odpovídá na Michal Vašíček
BlugW:

To je že ten footer je tam fixlej furt (jako tu na itnetwork když daš pryč ten JS nebo co to je ) , ja jen potřebují aby držel dole když se k němu proscrolluju.

PS: Ten navod nejde, zkusil jsem to znovu a footer je hned pod contentem místo toho aby držel uplně dole. :(

Editováno 10.7.2014 10:20
Nahoru Odpovědět 10.7.2014 10:17
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Michal Vašíček:
position: absolute;
bottom: 0;

a absolutní pozicování?

Nahoru Odpovědět  -1 10.7.2014 10:20
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
BlugW
Redaktor
Avatar
Odpovídá na Michal Vašíček
BlugW:

http://2imgs.com/3517d0fa29

Tohle mi to dělá furt i když jsem dal do contentu

margin: 0 auto -40px;

40px je šířka footeru

u body mám

height: 100%;
padding: 0;
margin: 0 auto;

u wrapperu

min-height: 100%;
Editováno 10.7.2014 10:39
Nahoru Odpovědět 10.7.2014 10:37
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
Avatar
Marián Ligocký
Redaktor
Avatar
Marián Ligocký:

Tento problém som musel riešit aj ja. Wrapperu pridaj

position:relative; padding-bottom: 40px;

A footeru pridaj

position:absolute;

A bolo by dobré keby si nám pridal tvoje kódy.

Editováno 10.7.2014 10:51
 
Nahoru Odpovědět 10.7.2014 10:50
Avatar
BlugW
Redaktor
Avatar
Odpovídá na Marián Ligocký
BlugW:

CSS

body {
    height: 100%;
    padding: 0;
    margin: 0 auto;
}

.wrapper {
    min-height: 100%;
}

header {
    background: #ff0;
    padding: 20px;
}

.main {
    overflow: auto;
    padding-bottom: 40px;
}

footer{
    position: absolute;
    height: 40px;

}

HTML

<body>
    <div class="wrapper">
        <header>
            <nav>
                <a href="#" class="nav_left">A</a>
                <a href="#" class="nav_left">B</a>
                <a href="#" class="nav_left">C</a>
            </nav>
        </header>
        <article class="main">
            <?php include(''); ?>
        </article>
        <footer>
            &copy; <?php echo (date('Y')); ?>
        </footer>
    </div>
</body>

Udělal jsem si pro test footru úplně novou html page i css, abych si neničil starý :D

Nahoru Odpovědět 10.7.2014 11:01
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
Avatar
BlugW
Redaktor
Avatar
Odpovídá na Marián Ligocký
BlugW:

Divné v chromu to vypadá úplně jinak, mám footer hned u headeru.
Nic méně přidál jsem tam lore ipsum 5 odstavcu a viz.:

http://jsfiddle.net/7bVe7/1/

Tohle mi to dělá furt, jak bych to nepředělál.

Nahoru Odpovědět 10.7.2014 11:37
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
Avatar
Marián Ligocký
Redaktor
Avatar
Odpovídá na BlugW
Marián Ligocký:

http://jsfiddle.net/7bVe7/3/ Toto by už fungovať malo. Pridal som iba výšku html na 100%.

 
Nahoru Odpovědět 10.7.2014 12:43
Avatar
BlugW
Redaktor
Avatar
Odpovídá na Marián Ligocký
BlugW:

Aha, to mě nenapadlo dát html, výšku :D

Díky

Nahoru Odpovědět  +1 10.7.2014 13:39
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 13 zpráv z 13.