Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu. Zároveň využij akce až 80 % zdarma při nákupu kreditů. Více informací:
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
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,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
Neaktivní uživatelský účet
Avatar
Jan Vargovský
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
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
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Jan Vargovský
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
Avatar

Člen
Avatar
:10.7.2014 9:58 
position: fixed;
bottom: 0;

? :)

 
Nahoru Odpovědět
10.7.2014 9:58
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na
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
Avatar

Člen
Avatar
:10.7.2014 10:20 
position: absolute;
bottom: 0;

a absolutní pozicování?

 
Nahoru Odpovědět
10.7.2014 10:20
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na
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
Avatar
Marián Ligocký
Tvůrce
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
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Marián Ligocký
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ý :D

Nahoru Odpovědět
10.7.2014 11:01
Neaktivní uživatelský účet
Avatar
Marián Ligocký
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
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
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Marián Ligocký
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
Avatar
Marián Ligocký
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
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
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Marián Ligocký
Neaktivní uživatel:10.7.2014 13:39

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

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.