Aktualizacja w 2019 r
TL; DR: Dzisiaj najlepszą opcją jest ostatnia w tej odpowiedzi - flexbox. Wszystko ładnie to obsługuje i ma od lat. Idź po to i nie oglądaj się za siebie. Pozostała część tej odpowiedzi została pozostawiona z przyczyn historycznych.
Sztuką jest zrozumienie, z czego bierze się 100%. Czytanie specyfikacji CSS może ci w tym pomóc.
Krótko mówiąc - istnieje coś takiego jak „zawierający blok” - który nie jest konieczny jako element nadrzędny. Mówiąc prosto, jest to pierwszy element w hierarchii, który ma pozycję: względną lub pozycję: bezwzględną. Lub sam element ciała, jeśli nie ma nic innego. Kiedy powiesz „szerokość: 100%”, sprawdza szerokość „bloku zawierającego” i ustawia szerokość elementu na taki sam rozmiar. Jeśli było tam coś jeszcze, możesz uzyskać zawartość „bloku zawierającego”, który jest większy niż on sam (w ten sposób „przepełniony”).
Wysokość działa w ten sam sposób. Z jednym wyjątkiem. Nie można uzyskać wysokości do 100% okna przeglądarki. Elementem najwyższego poziomu, na podstawie którego można obliczyć 100%, jest element body (lub html? Niepewny), który rozciąga się na tyle, aby pomieścić jego zawartość. Określenie wysokości: 100% nie będzie miało żadnego wpływu, ponieważ nie ma „elementu nadrzędnego”, względem którego można zmierzyć 100%. Samo okno się nie liczy. ;)
Aby coś rozciągało się dokładnie w 100% w oknie, masz dwie możliwości:
- Użyj JavaScript
- Nie używaj DOCTYPE. Nie jest to dobra praktyka, ale ustawia przeglądarki w „trybie dziwactwa”, w którym można ustawić wysokość = „100%” na elementach i rozciągnie je do rozmiaru okna. Pamiętaj, że reszta Twojej strony prawdopodobnie będzie musiała zostać zmieniona, aby uwzględnić zmiany DOCTYPE.
Aktualizacja: Nie jestem pewien, czy nie pomyliłem się już, kiedy to opublikowałem, ale z pewnością jest to teraz nieaktualne. Dzisiaj możesz to zrobić w arkuszu stylów: html, body { height: 100% }i faktycznie rozciągnie się on na całą twoją rzutnię. Nawet z DOCTYPE. min-height: 100%może być również przydatny, w zależności od twojej sytuacji.
Nie radziłbym też nikomu tworzyć dokumentu w trybie dziwactwa , ponieważ powoduje to o wiele więcej bólów głowy niż ich rozwiązuje. Każda przeglądarka ma inny tryb dziwactwa, więc sprawienie, by twoja strona wyglądała spójnie w różnych przeglądarkach, staje się o dwa rzędy wielkości trudniejsze. Użyj DOCTYPE. Zawsze. Najlepiej ten HTML5 - <!DOCTYPE html>. Jest łatwy do zapamiętania i działa jak urok we wszystkich przeglądarkach, nawet tych 10-letnich.
Jedynym wyjątkiem jest sytuacja, gdy musisz obsługiwać coś takiego jak IE5 lub coś takiego. Jeśli tam jesteś, to i tak jesteś sam. Te starożytne przeglądarki nie przypominają dzisiaj dzisiejszych przeglądarek, a niewiele porad, które tu podano, pomoże ci z nimi korzystać. Z drugiej strony, jeśli tam jesteś, prawdopodobnie po prostu musisz obsługiwać JEDNĄ przeglądarkę, która pozbywa się problemów ze zgodnością.
Powodzenia!
Aktualizacja 2: Hej, minęło dużo czasu! 6 lat później pojawiają się nowe opcje. Właśnie miałem dyskusję w komentarzach poniżej, oto więcej sztuczek, które działają w dzisiejszych przeglądarkach.
Opcja 1 - pozycjonowanie bezwzględne. Ładne i czyste, gdy znasz dokładną wysokość pierwszej części.
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;}
.second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red }
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<div class="second-row">
<iframe src="https://jsfiddle.net/about"></iframe>
</div>
Kilka uwag - w second-rowpojemnik jest potrzebna, bo bottom: 0i right: 0nie działa na iframe z jakiegoś powodu. Ma to coś wspólnego z byciem „zamienionym” elementem. Ale width: 100%i height: 100%działa dobrze. display: blockjest potrzebne, ponieważ jest toinline element domyślnie, a białe znaki w przeciwnym razie powodują dziwne przepełnienia.
Opcja 2 - tabele. Działa, gdy nie znasz wysokości pierwszej części. Możesz użyć rzeczywistych <table>tagów lub zrobić to w fantazyjny sposób display: table. Ja wybiorę to drugie, ponieważ wydaje się, że jest teraz modne.
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: table; empty-cells: show; border-collapse: collapse; width: 100%; height: 100%;}
.first-row {display: table-row; overflow: auto; background-color: lime;}
.second-row {display: table-row; height: 100%; background-color: red; overflow: hidden }
.second-row iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block;}
<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<div class="second-row">
<iframe src="https://jsfiddle.net/about"></iframe>
</div>
</div>
Kilka uwag - overflow: autoupewnia się, że wiersz zawsze zawiera całą jego zawartość. W przeciwnym razie elementy pływające mogą czasami się przepełnić. Theheight: 100%W drugim rzędzie sprawia pewien, że rozszerza się jak może ściskając pierwszy wiersz tak małe, jak to się robi.
Opcja 3 - Flexbox. Najczystszy z nich wszystkich, ale z mniej niż gwiazdkową obsługą przeglądarki. IE10 będzie potrzebował -ms-prefiksów dla właściwości flexbox i cokolwiek mniej nie będzie go w ogóle obsługiwał.
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }
<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>
Niektóre uwagi - dzieje się overflow: hiddentak, ponieważ iframe nadal generuje pewien rodzaj przepełnienia, nawet display: blockw tym przypadku. Nie jest widoczny w widoku pełnoekranowym ani w edytorze fragmentów, ale małe okno podglądu ma dodatkowy pasek przewijania. Nie mam pojęcia, co to jest, iframe są dziwne.