Zrób div wypełni wysokość pozostałego miejsca na ekranie


1908

Pracuję nad aplikacją internetową, w której chcę, aby zawartość wypełniała wysokość całego ekranu.

Strona ma nagłówek, który zawiera logo i informacje o koncie. Może to być dowolna wysokość. Chcę, aby div treści wypełnił resztę strony na dole.

Mam nagłówek divi treść div. W tej chwili używam tabeli do takiego układu:

CSS i HTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}
<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

Pełna wysokość strony jest wypełniona i nie jest wymagane przewijanie.

Dla czegokolwiek w div treści, ustawienie top: 0;umieści go bezpośrednio pod nagłówkiem. Czasami zawartość będzie prawdziwym stołem, którego wysokość będzie ustawiona na 100%. Włożenie do headerśrodka contentnie pozwoli na to.

Czy istnieje sposób na osiągnięcie tego samego efektu bez użycia table?

Aktualizacja:

Elementy wewnątrz zawartości divbędą miały również ustawione wartości procentowe. Więc coś w 100% w środku divwypełni go do dołu. Podobnie jak dwa elementy na 50%.

Aktualizacja 2:

Na przykład, jeśli nagłówek zajmuje 20% wysokości ekranu, tabela określona na 50% wewnątrz #contentzajmuje 40% powierzchni ekranu. Do tej pory zawijanie całej rzeczy w stół jest jedyną rzeczą, która działa.


31
Dla każdego, kto natknie się tutaj w przyszłości, możesz uzyskać pożądany układ tabeli w większości przeglądarek, bez znaczników tabeli, używając display:tablei powiązanych właściwości, zobacz tę odpowiedź na bardzo podobne pytanie.
AmeliaBR,

3
Próbowałem pobrać twoją konfigurację - jsfiddle.net/ceELs - ale nie działa, czego mi brakuje ?
Gill Bates

5
@Pan. Odpowiedź kosmita jest prosta i przydatna, sprawdź ją http://stackoverflow.com/a/23323175/188784
Gohan

4
W rzeczywistości to, co opisujesz, nie działa, nawet w przypadku tabel: jeśli zawartość zajmie więcej miejsca w pionie niż wysokość ekranu, komórka tabeli i cały stół rozwiną się poza spód ekranu. Przepełnienie treści: automatyczne nie spowoduje wyświetlenia paska przewijania.
Damien

@GillBates zadziała po określeniu wysokości elementu nadrzędnego spójrz na jsfiddle.net/ceELs/5
Michał Vašut

Odpowiedzi:


1109

Aktualizacja 2015: podejście flexbox

Istnieją dwie inne odpowiedzi krótko wspominające o flexboksie ; było to jednak ponad dwa lata temu i nie podają żadnych przykładów. Specyfikacja Flexboksu zdecydowanie się teraz ustabilizowała.

Uwaga: Chociaż specyfikacja CSS Flexible Boxes Layout znajduje się na etapie rekomendacji dla kandydatów, nie wszystkie przeglądarki go zaimplementowały. Implementacja WebKit musi być poprzedzona -webkit-; Internet Explorer implementuje starą wersję specyfikacji, z prefiksem -ms-; Opera 12.10 implementuje najnowszą wersję specyfikacji, bez prefiksu. Aby uzyskać aktualny stan zgodności, zobacz tabelę zgodności dla każdej właściwości.

(pochodzi z https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Fiętki_boksów )

Wszystkie główne przeglądarki i IE11 + obsługują Flexbox. W przeglądarce IE 10 lub starszej można użyć podkładki FlexieJS.

Aby sprawdzić bieżące wsparcie, możesz także zobaczyć tutaj: http://caniuse.com/#feat=flexbox

Przykład roboczy

Dzięki Flexbox możesz łatwo przełączać się między dowolnymi wierszami lub kolumnami o stałych wymiarach, wymiarach wielkości treści lub wymiarach pozostałej przestrzeni. W moim przykładzie ustawiłem przyciąganie nagłówka do jego zawartości (zgodnie z pytaniem PO), dodałem stopkę, aby pokazać, jak dodać region o stałej wysokości, a następnie ustawić obszar zawartości, aby wypełnić pozostałą przestrzeń.

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

W powyższym CSS właściwość flex skraca właściwości flex-grow , flex-shrink i flex- base, aby ustalić elastyczność elementów flex. Mozilla ma dobre wprowadzenie do modelu elastycznych pudełek .


9
Dlaczego flex: 0 1 30px;atrybut box .rowjest nadpisany w każdym divie?
Erdal G.

11
Oto obsługa przeglądarki dla Flexbox - miło widzieć to wszystko zielone - caniuse.com/#feat=flexbox
Brian Burns

1
Link do Flexie.js nie żyje. Oto projekt github github.com/doctyper/flexie
ses3ion

52
Zdecydowanie jest to bardzo dobre podejście i prawie działa;) Istnieje niewielki problem, gdy zawartość div.content przekracza oryginalną wygiętą wysokość. W obecnej implementacji „stopka” zostanie przesunięta niżej i nie tego oczekują programiści;) Więc zrobiłem bardzo łatwą naprawę. jsfiddle.net/przemcio/xLhLuzf9/3 Dodałem dodatkowy flex do przewijania kontenera i przelewu.
przemcio

12
@przemcio ładny punkt, ale nie sądzę konieczności przewijana zawartości, co każdy oczekuje programistów;) - trzeba tylko trzeba dodać overflow-y: autodo .row.contentosiągnąć to, czego potrzebujesz jednak.
Pebbl,

226

Naprawdę nie ma solidnego sposobu na przeglądarkę w CSS. Zakładając, że twój układ ma złożoność, musisz użyć JavaScript, aby ustawić wysokość elementu. Istotą tego, co musisz zrobić, jest:

Element Height = Viewport height - element.offset.top - desired bottom margin

Po uzyskaniu tej wartości i ustawieniu wysokości elementu należy dołączyć procedury obsługi zdarzeń do okna zarówno onload, jak i onresize, aby można było uruchomić funkcję zmiany rozmiaru.

Ponadto, zakładając, że treść może być większa niż obszar wyświetlania, musisz ustawić przepełnienie-y, aby przewijać.


2
Tak podejrzewałem. Jednak aplikacja będzie również działać z wyłączonym Javascriptem, więc chyba nadal będę używać tabeli.
Vincent McNabb

6
Vincent, sposób na utrzymanie się na ziemi. Chciałem zrobić dokładnie to samo i wydaje się to niemożliwe z css? Nie jestem pewien, ale niezależnie od innych ton rozwiązań nie rób tego, co opisałeś. Javascript jest jedynym, który działa poprawnie w tym momencie.
Travis

5
co jeśli wysokość okna się zmieni
Techsin,

4
Mam na myśli ... dlaczego nie używamy calc w 2013 roku?
kamii

4
wysokość: calc (100vh - 400px); jest poprawnym stylem CSS, który robi dokładnie to, o czym jest ten post. Wszystkie inne rozwiązania opierają się na ustalonej wysokości nadrzędnej lub wyświetlaniu bloku.
WilliamX

167

Oryginalny post został sprzed ponad 3 lat. Wydaje mi się, że wiele osób, które przychodzą do tego postu, jak ja, szuka rozwiązania w stylu aplikacji, powiedzmy, że naprawiono nagłówek, stopkę i treść o pełnej wysokości zajmującą resztę ekranu. Jeśli tak, ten post może pomóc, działa na IE7 + itp.

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

A oto kilka fragmentów tego postu:

@media screen { 
  
  /* start of screen rules. */ 
  
  /* Generic pane rules */
  body { margin: 0 }
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }

  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }
  
  /* end of screen rules. */ 
}
<div class="header row" style="background:yellow;">
    <h2>My header</h2>
</div> 
<div class="body row scroll-y" style="background:lightblue;">
    <p>The body</p>
</div> 
<div class="footer row" style="background:#e9e9e9;">
    My footer
</div>


74
Jest tylko jeden problem: nagłówek i stopka nie mają automatycznego rozmiaru. Że jest prawdziwa trudność, i że to, dlaczego „nie jest to możliwe” Odpowiedź jest obecnie na szczycie ...
Roman Starkov

Potrzebowałem nagłówka 55 pikseli i div, który wypełnia resztę wysokości dokumentu. to jest rozwiązanie!
Matías Cánepa

Jesteś bombą, próbowałem tego od tak dawna i to jest jedyne rozwiązanie, jakie znalazłem. Musiałem mieć mój element nawigacyjny na wysokości 60 pikseli u góry, a reszta rozciągać się na 100%, to rozwiązało.
Adam Waite,

Działa to dobrze, z wyjątkiem tego, że mam niewielki problem - jeśli włożę element display: tabledo ciała, wydaje się, że przepełnia ciało. Więc robienie height: 100%tego nie daje właściwej wysokości.
GSTAR

4
.colnie jest używane, prawda?
slartidan

143

Zamiast używać tabel w znacznikach, możesz użyć tabel CSS.

Narzut

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(Odpowiedni) CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1 i FIDDLE2

Niektóre zalety tej metody to:

1) Mniej znaczników

2) Znaczniki są bardziej semantyczne niż tabele, ponieważ nie są to dane tabelaryczne.

3) Obsługa przeglądarek jest bardzo dobra : IE8 +, Wszystkie nowoczesne przeglądarki i urządzenia mobilne ( caniuse )


Dla kompletności, oto równoważne elementy HTML do właściwości css dla modelu tabeli CSS

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption } 

3
Właśnie wskazano mi technikę tabel css . Okazuje się, że odpowiedź już była w tym pytaniu. To najlepszym rozwiązaniem; czyste, eleganckie i przy użyciu dokładnego narzędzia w sposób zgodny z jego przeznaczeniem. Tabele CSS
Ian Boyd

Kod skrzypce nie pasuje tutaj do odpowiedzi. Dodawanie html, body { height: 100%, width: 100% }wydawało się kluczowe w moich testach.
mlibby

8
Irytujące funkcje tabel CSS są dokładnie takie same, jak w przypadku normalnych tabel: jeśli zawartość jest zbyt duża, rozszerzają komórkę, aby ją dopasować. Oznacza to, że nadal może być konieczne ograniczenie rozmiaru (maksymalna wysokość) lub ustawienie wysokości z kodu, jeśli strona jest dynamiczna. Naprawdę tęsknię za siatkami Silverlight! :(
Gone Coding

3
Zawsze możesz dodać absolutnie umieszczony pojemnik wewnątrz elementu wiersza tabeli, a następnie ustawić jego szerokość i wysokość na 100%. Pamiętaj, aby ustawić pozycję względną również na elemencie tabeli-wiersza.
Mike Mellor

1
@MikeMellor nie działa w IE11, ponieważ wydaje się ignorować relativepozycjonowanie na table-rowelemencie, więc przyjmuje wysokość ascendentu z pierwszej pozycji, który nie jest elementem tabeli.
dwelle

95

Podejście tylko CSS (jeśli wysokość jest znana / ustalona)

Jeśli chcesz, aby środkowy element rozciągał się na całej stronie w pionie, możesz użyć tego, calc()co zostało wprowadzone w CSS3.

Zakładając, że mamy stałą wysokość header i footerelementy i chcemy, aby sectionznacznik zajmował całą dostępną wysokość w pionie ...

Próbny

Zakładany znacznik i twój CSS powinny być

html,
body {
  height: 100%;
}

header {
  height: 100px;
  background: grey;
}

section {
  height: calc(100% - (100px + 150px));
  /* Adding 100px of header and 150px of footer */
  background: tomato;
}

footer {
  height: 150px;
  background-color: blue;
}
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

Więc tutaj robię, sumując wysokość elementów i odejmując od 100%używania calc()funkcji.

Tylko upewnij się, że używasz height: 100%;elementów nadrzędnych.


13
OP stwierdził, że nagłówek może mieć dowolną wysokość. Więc jeśli nie znasz z góry wysokości, nie będziesz w stanie użyć obliczeń :(
Danield

1
@Danield Dlatego wspomniałem o stałej wysokości :)
Pan Alien

3
To rozwiązanie działało dla mnie i nie wymagało ode mnie przeprojektowywania istniejących stron wokół Flexbox. Jeśli używasz LESS, tj. Bootstrap, koniecznie przeczytaj i przeczytaj koderwall o tym, jak uciec od funkcji calc (), aby LESS jej nie obsługiwał.
jlyonsmith

1
Op powiedział „To może być dowolna wysokość”. Ustalone w ten sposób arbitralne środki ustalone przez projektanta. To rozwiązanie jest zdecydowanie najlepsze.
jck

57

Używany: height: calc(100vh - 110px);

kod:

  
.header { height: 60px; top: 0; background-color: green}
.body {
    height: calc(100vh - 110px); /*50+60*/
    background-color: gray;
}
.footer { height: 50px; bottom: 0; }
  
<div class="header">
    <h2>My header</h2>
</div> 
<div class="body">
    <p>The body</p>
</div> 
<div class="footer">
    My footer
</div>


1
Moim zdaniem najczystsze rozwiązanie. Na pewno jest to lepsze niż dodawanie javascript. (ale odpowiedź została już opublikowana w 2015 roku przez kogoś innego)
bvdb

to wydaje się znacznie czystsze.
theprogrammer

44

Proste rozwiązanie z wykorzystaniem Flexbox:

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}
<body>
  <div>header</div>
  <div class="content"></div>
</body>

Próbka Codepen

Alternatywne rozwiązanie z div wyśrodkowanym w div treści


4
To z pewnością najlepsza odpowiedź. Działa jak urok dla stron głównych bohatera-img lub połączenie bohatera-img z paskiem nawigacyjnym
noobcoderiam

jsfiddle.net/31ng75du/5 Testowane z Chrome, FF, Edge, Vivaldi
user2360831

To jest proste i najlepsze.
Dev Anand

38

A może po prostu użyjesz tego, vhco oznacza view heightw CSS ...

Spójrz na fragment kodu, który dla ciebie utworzyłem, i uruchom go:

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}
<div class="full-height">
</div>

Zobacz także zdjęcie, które dla ciebie stworzyłem:

Zrób div wypełni wysokość pozostałego miejsca na ekranie


10
To dobrze, jeśli chcesz, aby div obejmował całą wysokość okna. Teraz umieść nad nią nagłówek div o nieznanej wysokości.
LarryBud,

@LarryBud masz rację, to powoduje, że otoki otoki, więc wszystko powinno pójść do tego div ...
Alireza

34

CSS3 Prosty sposób

height: calc(100% - 10px); // 10px is height of your first div...

wszystkie główne przeglądarki obecnie go obsługują, więc śmiało, jeśli nie musisz obsługiwać starych przeglądarek.


4
Nie działa to, jeśli nie znasz wysokości innych elementów (np. Jeśli zawierają one zmienną liczbę elementów potomnych).
Ege Ersoz

możesz również użyć 100vh, każdy to robi: pamiętaj o umieszczeniu spacji między minusem a elementami
htafoya

28

Można to zrobić wyłącznie za CSSpomocą vh:

#page {
    display:block; 
    width:100%; 
    height:95vh !important; 
    overflow:hidden;
}

#tdcontent {
    float:left; 
    width:100%; 
    display:block;
}

#content {      
    float:left; 
    width:100%; 
    height:100%; 
    display:block; 
    overflow:scroll;
}

i HTML

<div id="page">

   <div id="tdcontent"></div>
   <div id="content"></div>

</div>

Sprawdziłem to, to działa na wszystkich głównych przeglądarek: Chrome, IE, iFireFox


2
Wow, nigdy nie słyszał vhi vwjednostki wcześniej. Więcej informacji: snook.ca/archives/html_and_css/vm-vh-units
Steve Bennett

Niestety nie obsługuje IE8 :(
Scott

2
Próbowałem tego podejścia, ale height: 100%on #contentspowodował, że jego wysokość była zgodna z wysokością, całkowicie #pageignorując #tdcontentwzrost. Przy dużej zawartości pasek przewijania wykracza poza dolną część strony.
Brandon

28

Żadne z opublikowanych rozwiązań nie działa, gdy potrzebny jest dolny div do przewijania, gdy zawartość jest zbyt wysoka. Oto rozwiązanie, które działa w takim przypadku:

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

.container {
  width: 400px;
  height: 300px;
}

.header {
  background: cyan;
}

.body {
  background: yellow;
  height: 100%;
}

.body-content-outer-wrapper {
  height: 100%;
}

.body-content-inner-wrapper {
  height: 100%;
  position: relative;
  overflow: auto;
}

.body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
<div class="table container">
  <div class="table-row header">
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
  </div>
  <div class="table-row body">
    <div class="table-cell body-content-outer-wrapper">
      <div class="body-content-inner-wrapper">
        <div class="body-content">
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
        </div>
      </div>
    </div>
  </div>
</div>

Oryginalne źródło: Napełnianie pozostałej wysokości pojemnika podczas obsługi przelewu w CSS

Podgląd na żywo JSFiddle


Dziękuję Ci!!! Próbowałem wszystkich odpowiedzi bez tabeli, bez Flexboksa, i to jedyna, która działała w 100% poprawnie. Jedno pytanie: oryginalne źródło ma tylko body-content-wrapper, a wydaje się, że wszystko działa dobrze bez podwójnego opakowania (bez żadnych table-cells). Czy jest jakiś problem z robieniem tego w ten sposób?
Brandon

1
@BrandonMintern Jeśli nie masz komórek tabeli, nie działa w IE8 i IE9. (Patrz komentarz w oryginalnym artykule.)
John Kurlak,

Tak, komórki są również wymagane w IE10. Niestety, w IE10 i poniżej, .bodywysokość kończy się na tej samej wysokości co ustawiona .container. Pionowy pasek przewijania wciąż znajduje się we właściwym miejscu, ale .containerkończy się rozciąganiem większym niż chcemy. Gdy jest pełny ekran, dolna część .bodyjest poza dolną częścią ekranu.
Brandon,

Dziękuję, @JohnKurlak. To jedyne rozwiązanie, które zadziałało w mojej sytuacji (sposób Flexbox został zablokowany przez błędne zachowanie w konkretnej wersji Chrome używanej przez mojego klienta)
Maksym Demidas

Święty ****! Tak długo szukałem tej odpowiedzi! Dziękuję bardzo. Flexbox tu nie działał, ale rzeczywiście działały komórki. Niesamowity.
aabbccsmith

25

Ja również szukałem odpowiedzi na to pytanie. Jeśli masz szczęście, że możesz celować w IE8 i nowsze wersje, możesz użyć display:tablepowiązanych wartości, aby uzyskać reguły renderowania tabel z elementami na poziomie bloku, w tym div.

Jeśli masz więcej szczęścia, a użytkownicy korzystają z przeglądarek najwyższego poziomu (na przykład, jeśli jest to aplikacja intranetowa na komputerach, którymi kontrolujesz, tak jak w moim najnowszym projekcie), możesz użyć nowego układu elastycznego pudełka w CSS3!


22

To, co zadziałało dla mnie (z divem w innym divie i zakładam, że we wszystkich innych okolicznościach) to ustawienie dolnego wypełnienia na 100%. To znaczy, dodaj to do swojego css / stylesheet:

padding-bottom: 100%;

14
100% czego? Jeśli spróbuję tego, otrzymam ogromną pustą przestrzeń i zacznie się przewijać.
mlibby,

100% rozmiaru rzutni może @mlibby. Jeśli ustawisz również swój HTML i body na 100% wysokości, div może przejść do 100%. Przy tylko jednym div, 100% będzie względne w stosunku do zawartości div. Nie próbowałem tego z zagnieżdżoną div.
Jess,

1
Oznacza to 100% wysokości elementu (dodanej jako wypełnienie elementu), co powoduje dwukrotność wysokości. Nie ma pewności, że wypełni stronę, a na pewno nie będzie odpowiedzią na pytanie. Może, jak już zauważyłem, faktycznie wypełnić więcej niż rzutnia.
Martin

2
wyściełane dno: 100% ustawia wysokość + 100% szerokości
Romeno

1
from w3school: Określa dolne wypełnienie w procentach szerokości elementu. w3schools.com/cssref/pr_padding-bottom.asp
mehdi.loa

21

Zastrzeżenie: Przyjęta odpowiedź daje pomysł na rozwiązanie, ale uważam, że jest nieco rozdęty niepotrzebnymi regułami otoki i css. Poniżej znajduje się rozwiązanie z bardzo małą liczbą reguł css.

HTML 5

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

Powyższe rozwiązanie wykorzystuje jednostki rzutni i Flexbox , a zatem jest IE10 +, pod warunkiem, że używasz starej składni dla IE10.

Codepen do zabawy: link do codepen

Lub ten, dla tych, którzy potrzebują przewijania głównego kontenera w przypadku przepełnienia zawartości: link do codepen


main {wysokość: 10 pikseli; flex: 1; przepełnienie: auto}
Naeem Baghi

2
Po marnowaniu godzin i testowaniu kilku podejść, ten był najlepszy! Jest zwięzły, prosty i elegancki.
marciowb

19

Jest teraz mnóstwo odpowiedzi, ale znalazłem zastosowanie height: 100vh;do pracy z elementem div, który musi wypełnić całą dostępną przestrzeń pionową.

W ten sposób nie muszę bawić się wyświetlaniem ani pozycjonowaniem. Przydało się to przy użyciu Bootstrap do stworzenia deski rozdzielczej, w której miałem pasek boczny i główny. Chciałem, aby główna rozciągnęła się i wypełniła całą pionową przestrzeń, aby móc zastosować kolor tła.

div {
    height: 100vh;
}

Obsługuje IE9 i nowsze: kliknij, aby zobaczyć łącze


14
Ale 100vh brzmi jak cała wysokość, a nie pozostała wysokość. Co jeśli masz nagłówek, a następnie chcesz wypełnić resztę
Epirocks

14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}

</style>
</head>
<body>

    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

</body>
</html>

We wszystkich rozsądnych przeglądarkach możesz umieścić div „nagłówka” przed treścią, jako rodzeństwo, i ten sam CSS będzie działał. Jednak IE7- nie interpretuje poprawnie wysokości, jeśli liczba zmiennoprzecinkowa wynosi w tym przypadku 100%, więc nagłówek musi być w treści, jak wyżej. Przepełnienie: auto spowoduje podwójne paski przewijania w IE (który zawsze ma widoczny pasek przewijania widocznego, ale wyłączony), ale bez niego zawartość zostanie przycięta, jeśli się przepełni.


Blisko! Prawie to, czego chcę, z wyjątkiem tego, że zamierzam umieścić inne rzeczy w div... tj. top: 0;Umieści coś pod nagłówkiem. Ponownie zmodyfikuję moje pytanie, ponieważ odpowiedziałeś doskonale i wciąż nie to, czego chcę! Po prostu ukryję przepełnienie, ponieważ zawartość musi się zmieścić.
Vincent McNabb,

-1: Ta odpowiedź tworzy treść zwaną div, która obejmuje cały ekran, a nie resztę ekranu
Casebash

11

Jeśli możesz sobie poradzić z brakiem obsługi starych przeglądarek (tj. MSIE 9 lub starszych), możesz to zrobić za pomocą modułu elastycznego układu pól, który jest już W3C CR. Ten moduł pozwala również na inne fajne sztuczki, takie jak zmiana kolejności treści.

Niestety, MSIE 9 lub nowsze nie obsługują tego i musisz użyć prefiksu dostawcy dla właściwości CSS dla każdej przeglądarki innej niż Firefox. Mamy nadzieję, że wkrótce inni dostawcy również upuszczą prefiks.

Innym wyborem byłby układ siatki CSS, ale ma jeszcze mniejszą obsługę ze stabilnych wersji przeglądarek. W praktyce tylko MSIE 10 to obsługuje.


11

Zmagałem się z tym przez chwilę i skończyłem z następującymi:

Ponieważ łatwo jest ustawić zawartość DIV na tej samej wysokości co element nadrzędny, ale najwyraźniej trudno jest nadać jej wysokość nadrzędną minus wysokość nagłówka, postanowiłem ustawić zawartość div na pełną wysokość, ale umieść ją absolutnie w lewym górnym rogu, a następnie zdefiniuj wypełnienie na górze, która ma wysokość nagłówka. W ten sposób zawartość wyświetla się starannie pod nagłówkiem i wypełnia całą pozostałą przestrzeń:

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    height: 100%;
}

15
Co jeśli nie znasz wysokości nagłówka?
Yugal Jindle

10

Rozwiązanie CSS Grid

Wystarczy zdefiniować właściwość bodywith display:gridi grid-template-rowsusing autoi frvalue.

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  padding: 1em;
  background: pink;
}

main {
  padding: 1em;
  background: lightblue;
}

footer {
  padding: 2em;
  background: lightgreen;
}

main:hover {
  height: 2000px;
  /* demos expansion of center element */
}
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

Kompletny przewodnik po Grids @ CSS-Tricks.com


9

Dlaczego nie tak po prostu?

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

Dajesz html i ciało (w tej kolejności) wysokość, a następnie po prostu nadajesz swoim elementom wysokość?

Pracuje dla mnie


Chodzi o to, że jeśli użytkownik korzysta z dużego ekranu do przeglądania tej strony, a wysokość nagłówka jest ustawiona dokładnie na 100 pikseli, co jest mniejsze niż 40% aktualnej wysokości, między nagłówkiem a kontekstem będzie duża pusta przestrzeń.
Saorikido

8

W rzeczywistości można użyć display: tabledo podzielenia obszaru na dwa elementy (nagłówek i treść), w których wysokość nagłówka może się różnić, a zawartość wypełnia pozostałą przestrzeń. Działa to z całą stroną, a także wtedy, gdy obszar jest po prostu zawartością innego elementu ustawionego z positionustawionym na relative, absolutelub fixed. Będzie działał, dopóki element nadrzędny ma niezerową wysokość.

Zobacz to skrzypce, a także poniższy kod:

CSS:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML:

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

2
Dobra odpowiedź, którą głosowałem, ale niestety nie działa z IE8, który jeszcze będzie dostępny przez długi czas.
Vincent McNabb

Aplikacje takie jak Gmail używają JavaScript do zmiany rozmiaru, co jest lepszym rozwiązaniem niż CSS w większości przypadków.
Vincent McNabb,

Myślę, że używają Javascript, ponieważ nie ma innego dobrego rozwiązania CSS dla różnych przeglądarek, nie dlatego, że jest lepsze.
Greg

1
@VincentMcNabb Działa w IE8 w3schools.com/cssref/pr_class_display.asp . Wymaga tylko deklaracji DOCTYPE. Nigdy nawet nie wiedziałem o wartości tabeli dla atrybutu display. Fajne rozwiązanie. +1
Govind Rai

8
 style="height:100vh"

rozwiązał problem dla mnie. W moim przypadku zastosowałem to do wymaganego div


6

Vincent, odpowiem ponownie, używając twoich nowych wymagań. Ponieważ nie zależy Ci na tym, aby treść była ukryta, jeśli jest zbyt długa, nie musisz unosić nagłówka. Po prostu umieść przelew ukryty w tagach HTML i body i ustaw #contentwysokość na 100%. Zawartość zawsze będzie dłuższa niż obszar wyświetlania o wysokość nagłówka, ale będzie ukryta i nie spowoduje wyświetlania pasków przewijania.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <style type="text/css">
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      color: #FFF;
    }
    p {
      margin: 0;
    }

    #header {
      background: red;
    }

    #content {
      position: relative;
      height: 100%;
      background: blue;
    }

    #content #positioned {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="header">
    Header
    <p>Header stuff</p>
  </div>

  <div id="content">
    Content
    <p>Content stuff</p>
    <div id="positioned">Positioned Content</div>
  </div>

</body>
</html>

Już o tym myślałem. Ale to też nie działa. Po prostu będę się trzymał, tablebo to działa. Dzięki za aktualizację.
Vincent McNabb,

5

Spróbuj tego

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

4

Znalazłem dość proste rozwiązanie, ponieważ dla mnie było to tylko zagadnienie projektowe. Chciałem, żeby reszta strony nie była biała poniżej czerwonej stopki. Więc ustawiłem kolor tła stron na czerwony. A zawartość tła ma kolor biały. Przy wysokości zawartości ustawionej na np. 20em lub 50% prawie pusta strona nie pozostawi całej strony czerwonej.


4

Miałem ten sam problem, ale nie mogłem rozwiązać problemu z powyższymi Flexboxami. Stworzyłem więc własny szablon, który obejmuje:

  • nagłówek z elementem o stałym rozmiarze
  • stopka
  • pasek boczny z paskiem przewijania zajmującym pozostałą wysokość
  • zadowolony

Użyłem Flexboksów, ale w prostszy sposób, używając tylko właściwości display: flex i flex-direction: row | column :

Używam kątowej i chcę, aby rozmiary moich komponentów były równe 100% ich elementu macierzystego.

Kluczem jest ustawienie wielkości (w procentach) dla wszystkich rodziców w celu ograniczenia ich wielkości. W poniższym przykładzie wysokość myapp ma 100% rzutni.

Główny składnik ma 90% rzutni, ponieważ nagłówek i stopka mają 5%.

Mój szablon opublikowałem tutaj: https://jsfiddle.net/abreneliere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

HTML:

<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>

4

Do aplikacji mobilnej używam tylko VH i VW

<div class="container">
  <div class="title">Title</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  font-size: 5vh;
}

.title {
  height: 20vh;
  background-color: red;
}

.content {
  height: 60vh;
  background: blue;
}

.footer {
  height: 20vh;
  background: green;
}

Demo - https://jsfiddle.net/u763ck92/


3
To nie jest właściwe rozwiązanie. vh jest niespójny w przeglądarkach mobilnych. Aby uzyskać więcej informacji, zobacz tutaj: stackoverflow.com/questions/37112218/…
HarshMarshmallow

3

Oddając pomysł pana Alien ...

Wydaje się, że jest to czystsze rozwiązanie niż popularny flex box dla przeglądarek obsługujących CSS3.

Wystarczy użyć minimalnej wysokości (zamiast wysokości) za pomocą funkcji calc () do bloku zawartości.

Calc () zaczyna się od 100% i odejmuje wysokości nagłówków i stopek (należy dołączyć wartości wypełnienia)

Używanie „minimalnej wysokości” zamiast „wysokości” jest szczególnie przydatne, ponieważ może pracować z zawartością renderowaną w javascript i strukturami JS, takimi jak Angular2. W przeciwnym razie obliczenia nie przesuną stopki na dół strony, gdy treść renderowana w javascript będzie widoczna.

Oto prosty przykład nagłówka i stopki wykorzystujących wysokość 50 pikseli i wypełnienie 20 pikseli w obu przypadkach.

HTML:

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

Css:

.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}

Oczywiście matematykę można uprościć, ale masz pomysł ...


3

W Bootstrap:

Style CSS:

html, body {
    height: 100%;
}

1) Wystarczy wypełnić wysokość pozostałego miejsca na ekranie:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1>

    <header>Header</header>
    <div>Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

! [wprowadź opis obrazu tutaj


2) wypełnij wysokość pozostałego miejsca na ekranie i wyrównaj zawartość do środka elementu nadrzędnego:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1">

    <header>Header</header>
    <div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

! [wprowadź opis obrazu tutaj


1

To moja własna minimalna wersja rozwiązania Pebbl. To trwało wiecznie, aby znaleźć sposób na uruchomienie go w IE11. (Przetestowano również w Chrome, Firefox, Edge i Safari).

<!DOCTYPE html>
<html>
<head>
<style>
html {
    height: 100%;
    }
body {
    height: 100%;
    margin: 0;
    }
section {
    display: flex;
    flex-direction: column;
    height: 100%;
    }
div:first-child {
    background: gold;
    }
div:last-child {
    background: plum;
    flex-grow: 1;
    }
</style>
</head>
<body>
    <section>
      <div>FIT</div>
      <div>GROW</div>
    </section>
</body>
</html>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.