Diskuze: Footer vzdy prilepenej dole

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

Aktivity (1)
Avatar
Test Case
Redaktor
Avatar
Test Case: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,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
Avatar
Jan Vargovský
Redaktor
Avatar
Odpovídá na Test Case
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  +1 10.7.2014 3:09
Avatar
Test Case
Redaktor
Avatar
Odpovídá na Jan Vargovský
Test Case: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
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Michal Vašíček:10.7.2014 9:58
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
Test Case
Redaktor
Avatar
Odpovídá na Michal Vašíček
Test Case: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
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Michal Vašíček:10.7.2014 10:20
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
Test Case
Redaktor
Avatar
Odpovídá na Michal Vašíček
Test Case: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
Avatar
Marián Ligocký
Redaktor
Avatar
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
Avatar
Test Case
Redaktor
Avatar
Odpovídá na Marián Ligocký
Test Case: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ý :D

 
Nahoru Odpovědět 10.7.2014 11:01
Avatar
Marián Ligocký
Redaktor
Avatar
 
Nahoru Odpovědět 10.7.2014 11:12
Avatar
Test Case
Redaktor
Avatar
Odpovídá na Marián Ligocký
Test Case: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
Avatar
Marián Ligocký
Redaktor
Avatar
Odpovídá na Test Case
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
Avatar
Test Case
Redaktor
Avatar
Odpovídá na Marián Ligocký
Test Case:10.7.2014 13:39

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

Díky

 
Nahoru Odpovědět  +1 10.7.2014 13:39
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.