Jak ustawić zawartość stopki Bootstrap w pełnej wysokości strony?

Question

Używam próbki Boostrap do tworzenia lepkiej stopki dla strony internetowej za pomocą CSS, wszystko działa dobrze, stopka pozostaje na miejscu na dole strony w miarę zmiany rozmiaru strony. Na wielu stronach mam treść, która musi być wyświetlana praktycznie na całej stronie, z zakazem stopki. Sekcja zawartości strony musi więc być ustawiona na 100% wysokości, aby zawartość mogła z kolei zostać zwymiarowana do pełnej wysokości.

Here's a JSFiddle that demonstrates the problem.

Jak możemy zielony kontener div pełnej wysokości, a więc dotyka Góra strony na górze i na szczyt stopce na dole?

Dzięki!

<div id="wrap"> 
    <!-- Begin page content --> 
    <div class="container"> 
     <div class="page-header"> 
      <h1>Sticky footer</h1> 

     </div> 
     <p class="lead">This is the sticky footer template taken from the Bootstrap web site.</p> 
     <p class="lead">How can we make this green .container div the full height of its parent #wrap div?</p> 
    </div> 
    <div id="push"></div> 
</div> 
<div id="footer"> 
    <div class="container"></div> 
</div> 

---

#wrap .container { 
    background-color: lightgreen; 
} 
/* Sticky footer styles */ 
html, body { 
    height: 100%; 
    /* The html and body elements cannot have any padding or margin. */ 
} 
/* Wrapper for page content to push down footer */ 
#wrap { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    /* Negative indent footer by it's height */ 
    margin: 0 auto -60px; 
} 
/* Set the fixed height of the footer here */ 
#push, #footer { 
    height: 60px; 
} 

#footer { 
    background-color: #f5f5f5; 
} 

Answer 1

mam rozwiązanie problemu. Przeniosłem go z JSFiddle do codepen, ponieważ lubię codepen lepiej. Nie ma innego powodu. http://cdpn.io/IJHxf

Zasadniczo otrzymałem odpowiedź i wyjaśniono to znacznie lepiej niż kiedykolwiek mogłem. http://v1.reinspire.net/blog/2005/10/11/css_vertical_stretch/

Po wprowadzeniu tej odpowiedzi, co znalazłem height: auto !important; jest winowajcą, dlaczego nie działa od razu. Skomentuj to w swoim identyfikatorze #wrap, aby zobaczyć, jak to działa. Pióro kodu zawiera dodatkowe zmiany, aby naprawdę zobaczyć, co się dzieje. Co naprawdę trzeba zrobić oryginalną pracę pytanie jest

#wrap .container { 
    background-color: lightgreen; 
    min-height: 100%; 
    height: auto; /* this line takes care of "more than enough content problem" */ 
} 


html, body { 
    height: 100%; 
    background-color: #dedede; 
    padding: 0; 
    margin: 0; 
} 


#wrap { 
    min-height: 100%; 
    /* height: auto !important; */ 
    height: 100%; 
    margin: 0 auto -60px; 
} 

Właściwie, co można zrobić, i to więcej sensu ma zamiast zakomentowanie całą linię height: auto !important; Można po prostu zdjąć !imporant. Na przykład:

#wrap { 
    height: auto !important; 
    /* changed to */ 
    height: auto; 
} 

Zmieniłem kolory, aby były bardziej widoczne, co naprawdę się działo. Zobaczysz to w codepen. W piórze kodu jest znacznie więcej komentarzy, żeby zobaczyć, co naprawdę zrobiłem.

Ponadto zauważyłem, że Twoja lepka stopka nadała mojej stronie pasek przewijania z powodu marginesu. Dla mnie pozbyłem się paska przewijania z poniższym kodem.

margin: 0 auto -60px; 
/* changed to */ 
margin: 0 auto -80px;