Przyklejona stopka, a raczej: treść nie rozciąga się do stopki.

Tak więc chciałem przykleić stopkę na stronie i uzyskać this one do pracy dla mnie. Wszystko jest dobrze, ale nie, niezupełnie ..Przyklejona stopka, a raczej: treść nie rozciąga się do stopki.

Problem polega na tym, że chciałbym, aby treść nad stopką rozciągała się do dołu. Teraz pole zawierające główną treść kończy się zaraz po tekście w polu, a między stopką a treścią jest spora przestrzeń. To, czego chcę, to tło głównej treści, która rozciąga się do stopki! Zobacz mój piękny obraz!

footerproblem

To co mam teraz w HTML:

<div id="wrap"> 
    <!-- start header --> 
    <div id="header"> 
     <div id="header-content"> 
     </div> 
    </div> 
    <!-- end header --> 

    <!-- start main --> 
    <div id="main"> 
    <div id="main-content"> 
    </div> 
    </div> 
    <!-- end main --> 
</div> 
<!-- start footer --> 
<div id="footer"> 
</div>

A w CSS:

html { 
    height: 100%; } 

body { 
    height: 100%;} 

/* wrap */ 
#wrap { 
    min-height: 100%; } 

/* main */ 
#main { 
    background-color: #43145c; 
    overflow: auto; 
    padding-bottom: 50px; } 

#main-content { 
    width: 720px; 
    margin: auto; 
    background-color: #643280; 
    padding-top: 20px; } 

#footer { 
    position: relative; 
    margin-top: -50px; 
    height: 50px; 
    clear: both; 
    background: red; }

Próbowałem ustawienie min wysokość główny na 100%, ale nie zrobił nie działa. Chcę tylko kolor tła głównej treści aż do stopki, ponieważ jest inny niż ciało i główne okno.

Czy to ma jakiś sens? Czy ktoś może pomóc?

Źródło

2012-02-21 stinaq

Ustawienie minimalnej wysokości głównej nie może się sprawdzić, ponieważ jej rodzic nie ma ustawionej wysokości. –

Spróbuj tego:

Wymień HTML i ciało stylów w arkuszu stylów z tym:

html,body {height: 100%;}

Następnie zastąpić "opakowanie" z tym:

#wrap { min-height: 100%; height: auto; }

Nadzieja to pomaga.

Źródło

2012-02-21 21:27:16

Nie, właściwie .. = (W jakiś sposób główne pole musi uzyskać minimalną wysokość odstępu między nagłówkiem i stopką, ale nie mam pojęcia jak! – stinaq

@StinaQ: Dodaj min-wysokość: wysokość stopki; GŁÓWNY div i zastosuj moją odpowiedź na to, co jest określone. Spróbuj i jeśli wszystko inne zawiedzie ... Sprawdź to: http://ryanfait.com/sticky-footer/ –

Spróbuj

HTML

<body> 
    <div id="wrap"> 
    <!-- start header --> 
    <div id="header"> 
     <div id="header-content"> 
     </div> 
    </div> 
    <!-- end header --> 

    <!-- start main --> 
    <div id="main"> 
     <div id="main-content"> 
     </div> 
    </div> 
    <!-- end main --> 

    <div class="push"></div> 
    </div> 

    <!-- start footer --> 
    <div id="footer"> 
    </div> 
</body>

CSS

 * { 
      margin: 0; 
      padding: 0; 
     } 

     html, 
     body { 
      height: 100%; 
     } 

     /* wrap */ 
     #wrap { 
      background: green; 
      height: auto !important; 
      margin: 0 auto; 
     } 

     #wrap, 
     #main, 
     #main-content { 
      margin-bottom: -50px; 
      min-height: 100%; 
      height: 100%; 

     } 

     /* main */ 
     #main { 
      background-color: #43145c; 
     } 

     #main-content { 
      width: 720px; 
      margin: 0 auto; 
      background-color: #643280; 
     } 

     .push, #footer { 
      height: 50px; 
     } 

     #footer { 
      position: relative; 
      background: red; 
     }

Źródło

2012-02-21 21:51:17 mikos

Znam ten został poproszony 6 miesięcy temu, ale byłem szukając rozwiązania tego problemu na dłuższą a teraz i miej nadzieję, że inne osoby mogą skorzystać z rozwiązania, które wykorzystałem będąc zarchiwizowanym. Byłeś na miejscu, kiedy powiedziałeś, że w jakiś sposób główne pole musi uzyskać minimalną wysokość przestrzeni między nagłówkiem a stopką.

Niestety, nie wiem, jak to zrobić z czystym CSS, to oczywiście jest dość łatwe w obsłudze JavaScript, ale to rozwiązanie nie zawsze jest opłacalne, a to jest trochę kłopotliwe z punktu widzenia rozdzielania kodu. Dobrą wiadomością jest to, że w zależności od tego, co musisz zrobić, możesz użyć hacka CSS.

To, co zrobiłem, to dodanie absolutnie pozycjonowanego elementu pod ciałem, który zasadniczo rozciągał się spod nagłówka powyżej stopki. W ten sposób mogłem dodać tło lub gradient na tym #divBelowBody, co zasadniczo pozwoliło mi udawać, że ten problem jest rozwiązany (chociaż to rozwiązanie pozostawia gorzki smak w moich ustach).

Ponadto, jeśli chcesz dodać obramowanie wokół elementu div treści i masz nadzieję, że rozszerzy się on na stopkę, nawet jeśli zawartość jest mała, jesteś spieprzony (chociaż nie bardzo, prawdopodobnie myślę o hacku lub dwa, aby to wykonalne), więc to działa tylko jeśli ufaliśmy dodać tło lub gradient itp

można zobaczyć kod w akcji tutaj: http://jsfiddle.net/qHAxG/ rozwinąć sekcję wynik poziomo jaśniej zobaczyć co się dzieje na.

Źródło

2012-09-02 08:41:48 RedHydra

patrz: THIS wersja demonstracyjna: może być użyteczna. Wygląda na to, że chcesz, aby element div z kolorem tła rozciągał się do dołu. Ale problem z lepką stopką polega na tym, że pozostaje na samym dole - zejdź mi z drogi, gdy zawartość rozciąga się poza port widokowy. Więc potrzebuje pewnej odległości (wysokość zawartości), aby wiedzieć, kiedy to zrobić. Jeśli ta wysokość nie jest określona przez rzeczywistą zawartość ... 100% też nie będzie działać. ponieważ wtedy "lepka" stopka nie działa tak naprawdę ... byłaby poza ekranem. Co to jest naprawdę 100%?

to wszystko mnie frustruje od roku ... ale zawsze znajduję sposób, aby wyglądał tak, jak chcę, nawet jeśli nie mogę go uruchomić tak, jak chcę ... mam nadzieję, że ten link powyższe demo może pożyczy kolejną część układanki. Powodzenia !

Źródło

2012-10-22 00:30:08 sheriffderek

Przyklejona stopka, a raczej: treść nie rozciąga się do stopki.

Odpowiedz

Powiązane problemy