Jak element html może wypełnić 100% pozostałej wysokości ekranu, używając tylko CSS?

118

Mam element nagłówka i element treści:

#header
#content

Chcę, aby nagłówek miał stałą wysokość, a zawartość wypełniła całą pozostałą wysokość dostępną na ekranie overflow-y: scroll;.

Czy jest to możliwe bez Javascript?

html css Złupić
źródło

83

Sztuczka polega na określeniu 100% wysokości w elementach html i body. Niektóre przeglądarki wykorzystują elementy nadrzędne (html, body), aby obliczyć wysokość.

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">
        </div>
    </body>
</html>

html, body
{
    height: 100%;
}
#Header
{
    width: 960px;
    height: 150px;
}
#Content
{
    height: 100%;
    width: 960px;
}

BentOnCoding
źródło

1

Wypróbowałem wszystkie rozwiązania, ale tylko to rozwiązało mój problem.

Alex

1

@Alex, jeśli to działa we wszystkich przeglądarkach, na które kierujesz reklamy, to zdecydowanie zaimplementuj to. Każdy ma inne wymagania.

BentOnCoding

321

zapomnij o wszystkich odpowiedziach, ta linia CSS zadziałała dla mnie w 2 sekundy:

height:100vh;

1vh = 1% wysokości ekranu przeglądarki

źródło

Aby uzyskać elastyczne skalowanie układu, możesz użyć:

min-height: 100vh

[aktualizacja z listopada 2018 r.] Jak wspomniano w komentarzach, użycie minimalnej wysokości może uniknąć problemów z projektami odpowiadającymi

[aktualizacja z kwietnia 2018 r.] Jak wspomniano w komentarzach, w 2011 roku, kiedy zadawano pytanie, nie wszystkie przeglądarki obsługiwały jednostki widoku. Inne odpowiedzi były rozwiązaniami z tamtych czasów - vmaxnadal nie jest obsługiwane w IE, więc może to nie być jeszcze najlepsze rozwiązanie dla wszystkich.

Sebastien H.
źródło

9

To najprostsza odpowiedź, ponieważ nie musisz ustawiać wysokości wszystkich elementów nadrzędnych na 100%. Oto bieżące wsparcie dla vh - caniuse.com/#feat=viewport-units - iOS najwyraźniej może wymagać obejścia, ponieważ „vh na iOS zawiera informacje o wysokości dolnego paska narzędzi w obliczaniu wysokości”.

Brian Burns

2

WOW, niezłe znalezisko! Spójrz na tych wszystkich ludzi z nadmiernie skomplikowanymi odpowiedziami.

NoName

8

Kiedy pytanie zostało zadane w 2011 roku, żadna z głównych przeglądarek nie obsługiwała jednostek widocznych. Te „zbyt skomplikowane odpowiedzi” były wówczas jedynymi opcjami.

JJJ

6

Drobna sugestia, że min-height: 100vhbyłoby znacznie lepiej. Skaluje się również do responsywnych projektów.

Wiggy A.

3

To nie odpowiada na zadane pytanie, zajęłoby to 100% widocznego obszaru. Nie chce tego, ponieważ jego nagłówek zajmie x% widocznego obszaru, ponieważ inne odpowiedzi są poprawne.

4cody

35

Właściwie najlepsze podejście jest takie:

html { 
    height:100%;
}
body { 
    min-height:100%;
}

To rozwiązuje wszystko dla mnie i pomaga mi kontrolować moją stopkę i może mieć stałą stopkę bez względu na to, czy strona jest przewijana w dół.

Rozwiązanie techniczne - EDYTOWANE

Historycznie rzecz biorąc, „wysokość” jest trudna do uformowania, w porównaniu do „szerokości” jest najłatwiejsza. Ponieważ css skupia się <body>na stylizacji do pracy. Kod powyżej - podaliśmy <html>i <body>wysokość. W tym miejscu pojawia się magia - ponieważ na stole do gry mamy „minimalną wysokość”, mówimy przeglądarce, która <body>jest lepsza, <html>ponieważ <body>przechowuje minimalną wysokość. To z kolei pozwala <body>na nadpisanie, <html>ponieważ <html>wysokość miałam już wcześniej. Innymi słowy, oszukujemy przeglądarkę, aby „odbijała” <html>się od stołu, abyśmy mogli stylizować niezależnie.

Faron
źródło

1

O mój Boże, to cud!

Geoff

Jak cud, to działa! Ale proszę: dlaczego min-heighti height?

Joy

1

@ShaojiangCai - Historycznie rzecz biorąc, „wysokość” jest trudna do uformowania, w porównaniu do „szerokości” jest najłatwiejsza. Ponieważ css skupia się <body>na stylizacji do pracy. Ten kod: daliśmy <html>i <body>wysokość. W tym miejscu pojawia się magia - ponieważ na stole do gry mamy „minimalną wysokość”, mówimy serwerowi, który <body>jest lepszy od tego, <html>że <body>ma minimalną wysokość. To z kolei pozwala <body>na nadpisanie, <html>ponieważ <html>wysokość miałam już wcześniej. Innymi słowy, oszukujemy serwer, aby „wyskakiwał” <html>ze stołu, abyśmy mogli stylizować niezależnie.

Faron

2

@Faron Wygląda na to, że „przeglądarka” byłaby lepszym wyborem słowa zamiast „serwer”. ;)

LETs

@EunLeem ... Zgadzam się z tobą co do tego, jak mogłem wybrać właściwe sformułowanie, aby rozwiązać ten problem. Dzięki za końcówkę "łokcia". Odpowiednio zaktualizowałem moją odpowiedź.

Faron

14

Możesz użyć vh na właściwości min-height.

min-height: 100vh;

W zależności od tego, jak używasz marginesów, możesz wykonać następujące czynności ...

min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element

Almeida Cavalcante
źródło

10

Przyjęte rozwiązanie w rzeczywistości nie zadziała. Można zauważyć, że zawartość divbędzie równa wysokości jego rodzica body. Zatem ustawienie bodywysokości na 100%spowoduje ustawienie jej równej wysokości okna przeglądarki. Powiedzmy, że okno przeglądarki miało 768pxwysokość, ustawiając divwysokość zawartości na 100%, divwysokość z kolei będzie wynosić 768px. W ten sposób zostanie utworzony element div nagłówka, 150pxa element div zawartości 768px. W końcu zawartość będzie 150pxznajdować się poniżej dolnej części strony. Aby uzyskać inne rozwiązanie, sprawdź ten link.

dykstrad
źródło

8

Dzięki HTML5 możesz to zrobić:

CSS:

body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}

HTML:

<header>blabablalba </header>
<section> Content </section>

Miguel
źródło

Uważaj na używanie kalkulatora na procentowym wzroście. Firefox nie będzie działał z tym poprawnie, chyba że wszyscy rodzice mają określoną wysokość.

TomDK

4

U mnie następny działał dobrze:

Nagłówek i zawartość zawinąłem w div

<div class="main-wrapper">
    <div class="header">

    </div>
    <div class="content">

    </div>
</div>

Użyłem tego odniesienia, aby wypełnić wysokość za pomocą flexbox. CSS wygląda tak:

.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.header {
    flex: 1;
}
.content {
    flex: 1;
}

Aby uzyskać więcej informacji na temat techniki flexbox, odwiedź odnośnik

hasher
źródło

1

Możesz także ustawić rodzica na display: inline. Zobacz http://codepen.io/tommymarshall/pen/cECyH

Upewnij się, że wysokość html i body również jest ustawiona na 100%.

tommymarshall
źródło

Odpowiedzi zawierające tylko łącze są odradzane. Spróbuj podsumować treść linku w swojej odpowiedzi

Użytkownik, który nie jest użytkownikiem

1

Przyjęta odpowiedź nie działa. A najwyższa głosowana odpowiedź nie odpowiada faktycznemu pytaniu. Z nagłówkiem o stałej wysokości w pikselach i wypełniaczem na pozostałym ekranie przeglądarki i przewijaj, aby wyświetlić owerflow. Oto rozwiązanie, które faktycznie działa, wykorzystując pozycjonowanie bezwzględne. Zakładam też, że wysokość nagłówka jest znana z dźwięku "stałego nagłówka" w pytaniu. Jako przykład używam 150px:

HTML:

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">      
        </div>
    </body>
</html>

CSS: (dodawanie koloru tła tylko dla efektu wizualnego)

#Header
{
    height: 150px;
    width: 100%;
    background-color: #ddd;
}
#Content
{
   position: absolute;
   width: 100%;
   top: 150px;
   bottom: 0;
   background-color: #aaa;
   overflow-y: scroll;
}

Aby uzyskać bardziej szczegółowe spojrzenie na to, jak to działa, z rzeczywistą zawartością wewnątrz #Content, spójrz na ten plik jsfiddle , używając wierszy i kolumn ładowania początkowego.

jumps4fun
źródło

"nagłówek o stałej wysokości piksela" -> to dokładnie! bottomNieruchomość upewnił się, że #Contentpozostaje zatrzymany na końcu strony. Doceniam, że poświęciłeś czas na wyjaśnienie.

Armfoot

1

I cieszę się, że komuś pomogło;)

skacze4fun

1

W tym przypadku chcę, aby główny element div zawartości był płynny, tak aby cała strona zajmowała 100% wysokości przeglądarki.

height: 100vh;

Fezal halai
źródło

1

Dodaję tutaj moje 5 centów i zaproponuję klasyczne rozwiązanie:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}

<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>

Rozwiń fragment

To zadziała we wszystkich przeglądarkach, bez skryptu, bez fleksa. Otwórz fragment kodu w trybie pełnej strony i zmień rozmiar przeglądarki: pożądane proporcje są zachowywane nawet w trybie pełnoekranowym.

Uwaga:

Elementy o innym kolorze tła mogą w rzeczywistości zakrywać się nawzajem. Tutaj użyłem solidnej ramki, aby upewnić się, że elementy są prawidłowo umieszczone.
idHeader.heighti idContent.topsą dostosowywane w celu uwzględnienia obramowania i powinny mieć tę samą wartość, jeśli obramowanie nie jest używane. W przeciwnym razie elementy wyjdą z widoku, ponieważ obliczona szerokość nie obejmuje obramowania, marginesu i / lub wypełnienia.
left:0; right:0;można zastąpić width:100%z tego samego powodu, jeśli nie ma obramowania.
Testowanie na oddzielnej stronie (nie jako fragment) nie wymaga żadnych zmian w HTML / body.
W IE6 i wcześniejszych wersjach musimy dodać padding-topi / lub padding-bottomatrybuty do #idOuterelementu.

Aby zakończyć moją odpowiedź, oto układ stopki:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}

<div id="idOuter">
  <div id="idContent" style="bottom:36px; top:0;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>

Rozwiń fragment

A oto układ z nagłówkiem i stopką:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}

<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:36px;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>

Rozwiń fragment

Dmitry Babich
źródło

0

Jeśli nie potrzebujesz obsługi IE 9 i starszych, użyłbym flexbox

body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }

Musisz także uzyskać treść, aby wypełnić całą stronę

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

James Lambert
źródło

0

PLaY CSS | Stały układ nagłówka / stopki / wyśrodkowanej jednej kolumny w różnych przeglądarkach

Ramki CSS, wersja 2: Przykład 2, określona szerokość | 456 Berea Street

Jedną ważną rzeczą jest to, że chociaż brzmi to łatwo, do pliku CSS będzie wchodzić sporo brzydkiego kodu, aby uzyskać taki efekt. Niestety, to naprawdę jedyna opcja.

Joe
źródło

Odpowiedzi zawierające tylko łącze są odradzane. Spróbuj zawrzeć kod w swojej odpowiedzi.

Użytkownik, który nie jest użytkownikiem,

0

#Header
{
width: 960px;
height: 150px;
}

#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}

Jazib Khan
źródło

-1

Najlepszym rozwiązaniem, jakie do tej pory znalazłem, jest ustawienie elementu stopki na dole strony, a następnie oszacowanie różnicy przesunięcia stopki od elementu, który musimy rozwinąć. na przykład

Plik html

<div id="contents"></div>
<div id="footer"></div>

Plik css

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Plik js (przy użyciu jquery)

var contents = $('#contents'); 
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');

Możesz również chcieć zaktualizować wysokość elementu zawartości przy każdej zmianie rozmiaru okna, więc ...

$(window).on('resize', function() {
  contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});

Αλέκος
źródło

-1

Bardzo prosty:

#content {
    max-height: 100%;
}

Masood
źródło

-3

Czy próbowałeś czegoś takiego?

CSS:

.content {
    height: 100%;
    display: block;
}

HTML:

<div class=".content">
<!-- Content goes here -->
</div>

Rahul Choudhary
źródło

Jak element html może wypełnić 100% pozostałej wysokości ekranu, używając tylko CSS?

Odpowiedzi:

Uwaga:

Plik html

Plik css

Plik js (przy użyciu jquery)