Układ CSS 100% minimalnej wysokości

Jaki jest najlepszy sposób na utworzenie elementu o minimalnej wysokości 100% w wielu przeglądarkach?

W szczególności, jeśli masz układ ze stałymi a headeri ,footerheight

jak sprawić, by środkowa część wypełniała 100%przestrzeń pomiędzy footerprzymocowaną do dna?

Używam następującego: Układ CSS - 100% wysokości

Minimalna wysokość

Element #container tej strony ma minimalną wysokość 100%. W ten sposób, jeśli zawartość wymaga większej wysokości niż zapewnia widok, wysokość #content wymusza również #container, aby stał się dłuższy. Możliwe kolumny w #content można następnie zwizualizować za pomocą obrazu tła na #container; elementy div nie są komórkami tabeli i nie potrzebujesz (ani nie chcesz) elementów fizycznych, aby stworzyć taki efekt wizualny. Jeśli nie jesteś jeszcze przekonany; myśl o chwiejnych liniach i gradientach zamiast prostych linii i prostych schematów kolorów.

Względne pozycjonowanie

Ponieważ #container ma względną pozycję, #footer zawsze pozostanie na swoim dole; ponieważ wspomniana powyżej minimalna wysokość nie zapobiega skalowaniu #container, będzie to działać nawet jeśli (a raczej zwłaszcza gdy) #content zmusza #container do wydłużenia.

Wypełnienie na dole

Ponieważ nie jest już w normalnym ruchu, dopełnienie dolnej części #content zapewnia teraz miejsce na absolutną #footer. To wypełnienie jest domyślnie uwzględnione w przewijanej wysokości, aby stopka nigdy nie nachodziła na powyższą zawartość.

Skaluj nieco rozmiar tekstu lub zmień rozmiar okna przeglądarki, aby przetestować ten układ.

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;

    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:orange;
    }

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
    div#header p {
        font-style:italic;
        font-size:1.1em;
        margin:0;
    }

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
    div#content p {
        text-align:justify;
        padding:0 1em;
    }

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}
div#footer p {
    padding:1em;
    margin:0;
}

U mnie działa dobrze.

Aby ustawić niestandardową wysokość zablokowaną gdzieś:

body, html {
  height: 100%;
}
#outerbox {
  width: 100%;
  position: absolute; /* to place it somewhere on the screen */
  top: 130px;         /* free space at top */
  bottom: 0;          /* makes it lock to the bottom */
}
#innerbox {
  width: 100%;
  position: absolute;				
  min-height: 100% !important; /* browser fill */
  height: auto;                /*content fill */
}

<div id="outerbox">
  <div id="innerbox"></div>
</div>

Oto inne rozwiązanie oparte na vhlub viewpoint height, aby uzyskać szczegółowe informacje, odwiedź jednostki CSS . Opiera się na tym rozwiązaniu , które zamiast tego wykorzystuje flex.

* {
    /* personal preference */
    margin: 0;
    padding: 0;
}
html {
    /* make sure we use up the whole viewport */
    width: 100%;
    min-height: 100vh;
    /* for debugging, a red background lets us see any seams */
    background-color: red;
}
body {
    /* make sure we use the full width but allow for more height */
    width: 100%;
    min-height: 100vh; /* this helps with the sticky footer */
}
main {
    /* for debugging, a blue background lets us see the content */
    background-color: skyblue;
	min-height: calc(100vh - 2.5em); /* this leaves space for the sticky footer */
}
footer {
    /* for debugging, a gray background lets us see the footer */
    background-color: gray;
	min-height:2.5em;
}

<main>
    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
</main>
<footer>
    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>
    <p>This is the footer.</p>
</footer>

Jednostki to vw, vh, vmax, vmin. Zasadniczo każda jednostka jest równa 1% rozmiaru widocznego obszaru. Tak więc, gdy zmienia się rzutnia, przeglądarka oblicza tę wartość i odpowiednio dostosowuje.

Więcej informacji znajdziesz tutaj:

Konkretnie:

1vw (viewport width) = 1% of viewport width
1vh (viewport height) = 1% of viewport height
1vmin (viewport minimum) = 1vw or 1vh, whatever is smallest
1vmax (viewport minimum) = 1vw or 1vh, whatever is largest

Odpowiedź kleolb02 wygląda całkiem nieźle. Innym sposobem byłoby połączenie lepkiej stopki i hacka o minimalnej wysokości

Aby min-heightpoprawnie pracować z procentami, podczas dziedziczenia węzła nadrzędnego min-height, sztuczka polega na ustawieniu wysokości węzła nadrzędnego na, 1pxa wtedy dziecko min-heightbędzie działało poprawnie.

Strona demonstracyjna

Czyste CSSrozwiązanie ( #content { min-height: 100%; }) zadziała w wielu przypadkach, ale nie we wszystkich - szczególnie w IE6 i IE7.

Niestety, będziesz musiał skorzystać z rozwiązania JavaScript, aby uzyskać pożądane zachowanie. Można to zrobić, obliczając żądaną wysokość treści <div>i ustawiając ją jako właściwość CSS w funkcji:

function resizeContent() {
  var contentDiv = document.getElementById('content');
  var headerDiv = document.getElementById('header');
  // This may need to be done differently on IE than FF, but you get the idea.
  var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
  contentDiv.style.height = 
    Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
}

Następnie możesz ustawić tę funkcję jako procedurę obsługi zdarzeń onLoadi onResize:

<body onload="resizeContent()" onresize="resizeContent()">
  . . .
</body>

Zgadzam się z Levikiem, ponieważ kontener nadrzędny jest ustawiony na 100%, jeśli masz paski boczne i chcesz, aby wypełniały przestrzeń, aby spotkać się ze stopką, nie możesz ich ustawić na 100%, ponieważ będą one również stanowić 100% wysokości nadrzędnej, co oznacza, że ​​stopka zostanie wciśnięta w dół podczas korzystania z funkcji czyszczenia.

Pomyśl o tym w ten sposób, jeśli Twój nagłówek ma wysokość 50 pikseli, a stopka 50 pikseli, a treść jest automatycznie dopasowywana do pozostałej przestrzeni, powiedzmy na przykład 100 pikseli, a kontener strony ma 100% tej wartości, jego wysokość będzie wynosić 200 pikseli. Następnie, gdy ustawisz wysokość paska bocznego na 100%, będzie to 200 pikseli, mimo że powinien on mieścić się między nagłówkiem a stopką. Zamiast tego kończy się na 50 piks. + 200 piks. + 50 piks., Więc strona ma teraz 300 pikseli, ponieważ paski boczne są ustawione na tę samą wysokość co kontener strony. W treści strony będzie duże białe miejsce.

Używam przeglądarki Internet Explorer 9 i właśnie to jest efektem stosowania tej 100% metody. Nie próbowałem tego w innych przeglądarkach i zakładam, że może działać w niektórych innych opcjach. ale nie będzie uniwersalny.

Najpierw powinieneś utworzyć divwith id='footer'po swoim contentdiv, a następnie po prostu zrób to.

Twój kod HTML powinien wyglądać następująco:

<html>
    <body>
        <div id="content">
            ...
        </div>
        <div id="footer"></div>
    </body>
</html>

Oraz CSS:

​html, body {
    height: 100%;   
}
#content {
    height: 100%;
}
#footer {
    clear: both;        
}

Prawdopodobnie najkrótsze rozwiązanie (działa tylko w nowoczesnych przeglądarkach)

Ten mały fragment CSS sprawia, że "the middle content part fill 100% of the space in between with the footer fixed to the bottom":

html, body { height: 100%; }
your_container { min-height: calc(100% - height_of_your_footer); }

jedynym wymaganiem jest to, że musisz mieć stopkę o stałej wysokości.

Na przykład dla tego układu:

<html><head></head><body>
  <main> your main content </main>
  </footer> your footer content </footer>
</body></html>

potrzebujesz tego CSS:

html, body { height: 100%; }
main { min-height: calc(100% - 2em); }
footer { height: 2em; }

Spróbuj tego:

body{ height: 100%; }
#content { 
    min-height: 500px;
    height: 100%;
}
#footer {
    height: 100px;
    clear: both !important;
}

divElementem poniżej zawartości div musi mieć clear:both.

Możesz spróbować: http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/ To 100% wysokości i poziomego środka.

po prostu udostępnij to, czego byłem użyty i dobrze działa

#content{
        height: auto;
        min-height:350px;
}

Jak wspomniano w odpowiedzi Afshina Mehrabaniego, należy ustawić treść i wysokość html na 100%, ale aby uzyskać tam stopkę, oblicz wysokość opakowania:

#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
/* WebKit */
height: -webkit-calc(100% - 100px);
/* Opera */
height: -o-calc(100% - 100px);
/* Standard */
height: calc(100% - 100px);
}