CSS Div stretch 100% wysokość strony

195

Mam pasek nawigacyjny po lewej stronie mojej strony i chcę, aby rozciągał się do 100% wysokości strony. Nie tylko wysokość rzutni, ale także obszary ukryte do momentu przewinięcia. Nie chcę używać javascript, aby to osiągnąć.

Czy można to zrobić w HTML / CSS?

css height max stretch Tomek
źródło

Odpowiedzi:

171

Oto rozwiązanie, które w końcu wymyśliłem, używając div jako kontenera na dynamiczne tło.

  • Usuń z-indexdla zastosowań innych niż tło.
  • Usuń leftlub rightdla kolumny o pełnej wysokości.
  • Usuń toplub bottomdla wiersza o pełnej szerokości.

EDYCJA 1: Poniższy CSS został edytowany, ponieważ nie wyświetlał się poprawnie w FF i Chrome. przeniósł position:relativesię na HTML i ustawił na body height:100%zamiast na min-height:100%.

EDYCJA 2: Dodano dodatkowe komentarze do CSS. Dodano więcej instrukcji powyżej.

CSS:

html{
    min-height:100%;/* make sure it is at least as tall as the viewport */
    position:relative;
}
body{
    height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
    z-index:-1; /* Remove this line if it's not going to be a background! */
}

HTML:

<!doctype html>
<html>
<body>
    <div id="cloud-container"></div>
</body>
</html>

Czemu?

html{min-height:100%;position:relative;}

Bez tego DIV kontenera chmurowego jest usuwany z kontekstu układu HTML. position: relativezapewnia, że ​​DIV pozostanie wewnątrz pola HTML, gdy zostanie narysowany, tak że bottom:0odnosi się do dolnej części pola HTML. Możesz także użyć height:100%w kontenerze w chmurze, ponieważ teraz odnosi się on do wysokości znacznika HTML, a nie do rzutni.

Knyri
źródło
to jest świetne, ale nie centrum. jakaś naprawa tego? margines: 0 auto; nie działa.
krem
Świetna odpowiedź. Zauważyłem jednak, że na htmlelemencie trzeba użyć minimalnej wysokości (a nie tylko wysokości) . Dlaczego?
HartleySan
Używanie heightoznacza „jesteś taki wysoki; Nie więcej i nie mniej.' Co oznacza, że ​​będzie to wysokość rzutni. Chcemy, aby była co najmniej tak wysoka jak rzutnia lub wyższa. min-heightrobi to ładnie.
Knyri
1
Indeks Z istnieje, ponieważ jest to fragment ruchomego tła, które zrobiłem i chciałem się upewnić, że div pozostanie w tle. Nie jest potrzebny do normalnych elementów.
Knyri
5
To jest wspaniałe. Zajmuję się CSS od 15 lat i nigdy nie kliknąłem, że pozycjonowanie do <html>i pozycjonowanie do rzutni to dwie osobne rzeczy. Dziękuję Ci!
Ben Hull,
81

W HTML5 najłatwiej jest to zrobić height: 100vh. Gdzie „vh” oznacza wysokość rzutni okna przeglądarki. Reaguje na zmianę rozmiaru przeglądarki i urządzeń mobilnych.

Alchuang
źródło
39
Całkowicie mija się z celem. OP prosi o wysokość strony, a nie o wysokość okna / rzutni.
Greg
9
Wysokość dokumentu, a nie wysokość rzutni.
punkbit
7
taki sam komentarz jak powyżej
ericn
11
Pośpiesznie odczytałem pytanie i uznałem tę odpowiedź za przydatną. Dziękuję za popełnienie tego samego błędu, który popełniłem, ale teraz chciałbym zasugerować zmianę tej odpowiedzi w celu uwzględnienia tego zastrzeżenia.
durette 14.04.16
Nawiasem mówiąc, spojrzałem w górę, jest też vw.
Aaron Franke,
14

Miałem podobny problem i rozwiązaniem było zrobienie tego:

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
}

Chciałem div z wycentrowaną stroną o wysokości 100% wysokości strony, więc moim całkowitym rozwiązaniem było:

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0; 
    width: XXXpx; /*otherwise div defaults to page width*/
    margin: 0 auto; /*horizontally centers div*/
}

Może być konieczne utworzenie elementu nadrzędnego (lub po prostu „body”) position: relative;

Nate Barr
źródło
16
Dlaczego wszyscy nazywają to cloud-container?
Wilf
To miło! Ignorowanie ustawiania wysokości jest genialnym pomysłem i nie zauważyłem jeszcze żadnego błędu. Kocham to. POCAŁUNEK ! Dzięki za napiwek!
daneczech
13

Możesz oszukiwać za pomocą Faux Columns Lub możesz użyć sztuczek CSS

Ryan Doherty
źródło
1
Zauważ jednak, że sztuczka css zapewni ci kolumny o równej wysokości, ale nie kolumny o wysokości 100%.
thedz
Jeśli pasek nawigacyjny zostanie rozwinięty do wysokości zawartości, która określa wysokość strony, da Ci 100% wysokości.
Ryan Doherty,
1
-1 za brak zapewnienia w 100% bezpiecznego sposobu, aby upewnić się, że pasek nawigacji jest zawsze wystarczająco wysoki.
Aaron Digulla,
martwy link: ((((
JBis
9

To proste przy użyciu tabeli:

<html>

<head>
    <title>100% Height test</title>
</head>

<body>
    <table style="float: left; height: 100%; width: 200px; border: 1px solid red">
        <tbody>
            <tr>
                <td>Nav area</td>
            </tr>
        </tbody>
    </table>
    <div style="border: 1px solid green;">Content blabla... text
        <br /> text
        <br /> text
        <br /> text
        <br />
    </div>
</body>

</html>

Kiedy wprowadzono DIV, ludzie tak bardzo bali się stołów, że biedny DIV stał się metaforycznym młotem.

Aaron Digulla
źródło
6
Podczas gdy DIV i płynne style są świetne, myślę, że CSS nadal nie uchwyca istoty układu ekranu w taki sam sposób, w jaki TABELA osiąga istotę układu stołu. ... A układ stołu jest wciąż akceptowalnym sposobem na robienie rzeczy.
Jeff Meatball Yang
9
Tabele są przeznaczone dla danych tabelarycznych, a nie układu strony. Biorąc to pod uwagę, CSS ma pewne poważne niedociągnięcia, jeśli chodzi o odwieczne pytanie o wysokości 100%. Muszę przyznać, że korzystałem z tego rozwiązania w krótkim terminie, ale zawsze czułem, że się poddaję.
Scott Greenfield,
6
@ Scott: Raz zmarnowałem trzy tygodnie, próbując uzyskać projekt o wysokości 100% w trzech głównych przeglądarkach. Naprawdę nie słyszę już bzdur „stoły są złe” :-( Nawet z moją wiedzą, używanie DIV jest zbyt skomplikowane.
Aaron Digulla,
1
Właściwe planowanie gwarantuje, że nie jest konieczne poleganie na tabelach. Teraz, w 2012 roku, kiedy cała branża przesuwa się poza IE6 / 7, zdecydowanie odradzam używanie stołów o wysokości 100%!
Vael Victus
4
Nie musisz używać <table>, możesz użyć <div style = "display: table;" : D
Wilf
8

Użyj pozycji bezwzględnej. Zauważ, że nie w ten sposób jesteśmy przyzwyczajeni do używania pozycji bezwzględnej, która wymaga ręcznego układania elementów lub swobodnych okien dialogowych. Spowoduje to automatyczne rozciągnięcie po zmianie rozmiaru okna lub zawartości. Uważam, że wymaga to trybu standardów, ale będzie działać w IE6 i nowszych wersjach.

Wystarczy zamienić div z id „thecontent” z treścią (podana wysokość jest tylko dla ilustracji, nie trzeba określać wysokości rzeczywistej zawartości.

<div style="position: relative; width: 100%;">
      <div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
      <div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
         <div style="height: 10000px;" id="thecontent"></div>
      </div>
</div>

Działa to tak, że zewnętrzny div działa jako punkt odniesienia dla paska nawigacyjnego. Zewnętrzny div jest rozciągnięty przez treść div „content”. Pasek nawigacyjny wykorzystuje pozycjonowanie bezwzględne, aby rozciągnąć się na wysokość swojego elementu nadrzędnego. Dla wyrównania w poziomie dokonujemy przesunięcia div zawartości o tę samą szerokość paska nawigacyjnego.

Jest to znacznie łatwiejsze dzięki modelowi CSS3 Flex Box, ale nie jest to jeszcze dostępne w IE i ma swoje własne dziwactwa.

tstanis
źródło
Cześć tstanis, testowałem na IE6 i pasek nawigacyjny się nie rozciągał . W FireFox Chrome działa jednak bardzo dobrze.
Lucas Pottersky
W IE6 użyj tabeli lub JavaScript lub przełącznika przeglądarki, chyba że robiłeś to już kilkanaście razy.
Aaron Digulla,
6

Wpadłem na ten sam problem co ty. Chciałem zrobić DIVjako tło, ponieważ, ponieważ łatwo manipulować div za pomocą javascript. W każdym razie trzy rzeczy, które zrobiłem w css dla tego div.

CSS:

{    
position:absolute; 
display:block; 
height:100%; 
width:100%; 
top:0px; 
left:0px; 
z-index:-1;    
}
Talha
źródło
6

Jeśli celujesz w bardziej nowoczesne przeglądarki, życie może być bardzo proste. próbować:

.elem{    
    height: 100vh;
 }

jeśli potrzebujesz na 50% strony, zamień 100 na 50.

Adam Boostani
źródło
3
Zakłada się, że wysokość strony jest taka sama jak wysokość ekranu. Strona często może być znacznie dłuższa niż wysokość ekranu, dlatego przewijamy w dół.
TidyDev
5

Chcę objąć całą stronę internetową przed wyświetleniem modalnego wyskakującego okienka. Próbowałem wielu metod przy użyciu CSS i Javascript, ale żadna z nich nie pomogła, dopóki nie wymyślę następującego rozwiązania. To działa dla mnie, mam nadzieję, że to też pomoże.

<!DOCTYPE html>
<html>
	<head>
		<style>
			html, body {
			    margin: 0px 0px;
			    height 100%;
			}
          
            div.full-page {
                position: fixed;
                top: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                background-color: #000;
                opacity:0.8;
                overflow-y: hidden;
                overflow-x: hidden;
            }
          
            div.full-page div.avoid-content-highlight {
                position: relative;
                width: 100%;
                height: 100%;
            }
          
            div.modal-popup {
                position: fixed;
                top: 20%;
                bottom: 20%;
                left: 30%;
                right: 30%;
                background-color: #FFF;
                border: 1px solid #000;
            }
		</style>
		<script>
		
			// Polling for the sake of my intern tests
			var interval = setInterval(function() {
				if(document.readyState === 'complete') {
					clearInterval(interval);
					isReady();
				}    
			}, 1000);
			
			function isReady() {
				document.getElementById('btn1').disabled = false;
				document.getElementById('btn2').disabled = false;
				
				// disable scrolling
                document.getElementsByTagName('body')[0].style.overflow = 'hidden';
			}
			
			function promptModalPopup() {
                document.getElementById("div1").style.visibility = 'visible';
                document.getElementById("div2").style.visibility = 'visible';
				
				// disable scrolling
                document.getElementsByTagName('body')[0].style.overflow = 'hidden';
            }
          
            function closeModalPopup() {
                document.getElementById("div2").style.visibility = 'hidden';  
                document.getElementById("div1").style.visibility = 'hidden';
				
				// enable scrolling
                document.getElementsByTagName('body')[0].style.overflow = 'scroll';
            }
		</script>
		
	</head>
	<body id="body">
		<div id="div1" class="full-page">
			<div class="avoid-content-highlight">
                
            </div>
		</div>
        <button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button>
		<div id="demo">
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
		</div>
        <div id="div2" class="modal-popup">
            I am on top of all other containers
            <button id="btn2" onclick="closeModalPopup()" disabled>Close</button>
        <div>
	</body>
</html>
Rozwiń fragment kodu

Powodzenia ;-)

Chong Chern Dong
źródło
2 
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
Swadesh Behera
źródło
1 

 
           document.body.onload = function () {
                var textcontrol = document.getElementById("page");
                textcontrol.style.height = (window.innerHeight) + 'px';
            }
<html>
<head><title></title></head>
<body>

<div id="page" style="background:green;">
</div>
</body>
</html>
Rozwiń fragment kodu

reaw_ni
źródło
dodaj wyjaśnienie do swojej odpowiedzi, pokazując, co robi i jak rozwiązuje problem
Our Man in Bananas
div „page” 100% wysokości dowolnej platformy. po prostu skopiuj skrypt js do znacznika <script> </script> i wklej do kodu HTML.
reaw_ni
0

Proste, po prostu zawiń to w div tabeli ...

HTML:

<div class="fake-table">
   <div class="left-side">
     some text
   </div>
   <div class="right-side">
     My Navigation or something
   </div>
</div>

CSS:

<style>

 .fake-table{display:table;width:100%;height:100%;}
 .left-size{width:30%;height:100%;}
 .left-size{width:70%;height:100%;}

</style>
Steffan Perry
źródło