Diskuze: Footer vzdy prilepenej dole

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:10.7.2014 2:47

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,content,footer) který už je nastylovan aby držel header a footer kde ma, ale nic nenašel

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

Díky předem.

Editováno 10.7.2014 2:48

Odpovědět

10.7.2014 2:47

Neaktivní uživatelský účet

Jan Vargovský

Tvůrce

Jan Vargovský:10.7.2014 3:09

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

10.7.2014 3:09

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:10.7.2014 9:56

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

Neaktivní uživatelský účet

Člen

:10.7.2014 9:58

position: fixed;
bottom: 0;

Nahoru Odpovědět

10.7.2014 9:58

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:10.7.2014 10:17

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

Neaktivní uživatelský účet

Člen

:10.7.2014 10:20

position: absolute;
bottom: 0;

a absolutní pozicování?

Nahoru Odpovědět

10.7.2014 10:20

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:10.7.2014 10:37

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

Neaktivní uživatelský účet

Marián Ligocký

Tvůrce

Marián Ligocký:10.7.2014 10:50

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

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:10.7.2014 11:01

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ý

Nahoru Odpovědět

10.7.2014 11:01

Neaktivní uživatelský účet

Marián Ligocký

Tvůrce

Marián Ligocký:10.7.2014 11:12

Myslím že to funguje http://jsfiddle.net/7bVe7/ .

Nahoru Odpovědět

10.7.2014 11:12

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:10.7.2014 11:37

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

Neaktivní uživatelský účet

Marián Ligocký

Tvůrce

Marián Ligocký:10.7.2014 12:43

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

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:10.7.2014 13:39

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

Díky

Nahoru Odpovědět

10.7.2014 13:39

Neaktivní uživatelský účet

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.

Nejčastěji vyhledáváné

Diskuze: Footer vzdy prilepenej dole