CSS Div Stretch 100% Seitenhöhe

195

Ich habe eine Navigationsleiste auf der linken Seite meiner Seite und möchte, dass sie sich auf 100% der Seitenhöhe erstreckt. Nicht nur die Höhe des Ansichtsfensters, sondern auch die Bereiche, die bis zum Scrollen ausgeblendet sind. Ich möchte kein Javascript verwenden, um dies zu erreichen.

Kann es in HTML / CSS gemacht werden?

css height max stretch Tom
quelle

Antworten:

171

Hier ist die Lösung, die ich mir endlich ausgedacht habe, als ich ein div als Container für einen dynamischen Hintergrund verwendet habe.

  • Entfernen Sie die z-indexfür Nicht-Hintergrund-Zwecke.
  • Entfernen Sie leftoder rightfür eine Säule voller Höhe.
  • Entfernen Sie topoder bottomfür eine Reihe voller Breite.

BEARBEITEN 1: CSS unten wurde bearbeitet, da es in FF und Chrome nicht korrekt angezeigt wurde. verschoben position:relative, um im HTML zu sein und den Body auf height:100%anstelle von zu setzen min-height:100%.

BEARBEITEN 2: Zusätzliche Kommentare zu CSS hinzugefügt. Einige weitere Anweisungen wurden hinzugefügt.

Das 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! */
}

Das HTML:

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

Warum?

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

Ohne dies wird der Cloud-Container DIV aus dem Layoutkontext des HTML entfernt. position: relativestellt sicher, dass der DIV beim Zeichnen im HTML-Feld bleibt, sodass er bottom:0sich auf den unteren Rand des HTML-Felds bezieht. Sie können height:100%den Cloud-Container auch verwenden, da er sich jetzt auf die Höhe des HTML-Tags und nicht auf das Ansichtsfenster bezieht.

Knyri
quelle
Das ist großartig, aber nicht zentriert. Irgendeine Lösung dafür? Rand: 0 Auto; funktioniert nicht.
Creme
Tolle Antwort. Mir ist aufgefallen, dass Sie für das htmlElement eine Mindesthöhe (und nicht nur eine Höhe) verwenden müssen. Warum ist das so?
HartleySan
Mit heightheißt, du bist so groß; nicht mehr und nicht weniger. ' Dies bedeutet, dass es sich um die Höhe des Ansichtsfensters handelt. Wir möchten, dass es mindestens so hoch wie das Ansichtsfenster oder höher ist. min-heightmacht das schön.
Knyri
1
Der Z-Index ist da, weil dies ein Ausschnitt für einen sich bewegenden Hintergrund ist, den ich gemacht habe, und ich wollte sicherstellen, dass der Div im Hintergrund bleibt. Es wird nicht für normale Elemente benötigt.
Knyri
5
Das ist ausgezeichnet. Ich mache seit 15 Jahren CSS und es hat nie geklickt, dass das Positionieren im <html>und das Positionieren im Ansichtsfenster zwei getrennte Dinge waren. Danke dir!
Ben Hull
81

Mit HTML5 ist es am einfachsten, dies zu tun height: 100vh. Wobei 'vh' für die Höhe des Ansichtsfensters des Browserfensters steht. Reagiert auf die Größenänderung von Browsern und Mobilgeräten.

Alchuang
quelle
38
Den Punkt komplett verfehlen. OP fragt nach der Höhe der Seite, nicht nach der Höhe des Fensters / Ansichtsfensters.
Greg
9
Dokumenthöhe, nicht Ansichtshöhenhöhe.
Punkbit
7
gleicher Kommentar wie oben
Ericn
11
Ich habe die Frage hastig falsch verstanden und fand diese Antwort nützlich. Vielen Dank, dass Sie den gleichen Fehler gemacht haben, den ich gemacht habe, aber jetzt möchte ich vorschlagen, dass diese Antwort geändert wird, um diese Einschränkung aufzunehmen.
Durette
Übrigens habe ich es nachgeschlagen, es gibt es auch vw.
Aaron Franke
14

Ich hatte ein ähnliches Problem und die Lösung bestand darin, dies zu tun:

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

Ich wollte ein seitenzentriertes Div mit einer Höhe von 100% der Seitenhöhe, daher war meine Gesamtlösung:

#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*/
}

Möglicherweise müssen Sie ein übergeordnetes Element (oder einfach 'body') erstellen position: relative;

Nate Barr
quelle
16
Warum nennt es jeder ein cloud-container?
Wilf
Das ist schön! Das Ignorieren der Höhenkorrektur ist eigentlich eine geniale Idee und ich habe noch keinen Fehler bemerkt. Liebe es. KUSS ! Danke für den Tipp Mann!
Daneczech
13

Sie können mit Faux Columns betrügen oder Sie können einige CSS-Tricks verwenden

Ryan Doherty
quelle
1
Beachten Sie jedoch, dass Sie mit CSS-Tricks Spalten mit gleicher Höhe erhalten, jedoch keine Spalten mit 100% Höhe.
Thedz
Wenn die Navigationsleiste auf die Höhe des Inhalts erweitert wird, die die Höhe der Seite bestimmt, erhalten Sie eine Höhe von 100%.
Ryan Doherty
1
-1, weil keine 100% sichere Methode bereitgestellt wurde, um sicherzustellen, dass die Navigationsleiste immer hoch genug ist.
Aaron Digulla
toter Link: ((((
JBis
9

Es ist einfach, eine Tabelle zu verwenden:

<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>

Als DIV eingeführt wurde, hatten die Leute solche Angst vor Tischen, dass der arme DIV zum metaphorischen Hammer wurde.

Aaron Digulla
quelle
6
Obwohl DIVs und flüssige Stile großartig sind, denke ich, dass CSS die Essenz des Bildschirmlayouts immer noch nicht auf die gleiche Weise erfasst, wie TABLE die Essenz des Tabellenlayouts erreicht. ... und Tabellenlayout ist immer noch eine akzeptable Methode, um Dinge zu tun.
Jeff Meatball Yang
8
Tabellen sind für Tabellendaten gedacht, nicht für das Seitenlayout. Abgesehen davon weist CSS einige große Mängel auf, wenn es um die uralte Frage der 100% -Höhe geht. Ich muss zugeben, dass ich diese Lösung zu einem engen Termin verwendet habe, aber es fühlte sich immer so an, als würde ich aufgeben.
Scott Greenfield
6
@Scott: Ich habe einmal drei Wochen damit verbracht, ein Design mit 100% Höhe in drei großen Browsern richtig zu machen. Ich kann den Bullshit "Tische sind böse" wirklich nicht mehr hören :-( Trotz meines Wissens ist die Verwendung von DIVs viel zu kompliziert.
Aaron Digulla
1
Durch eine ordnungsgemäße Planung wird sichergestellt, dass keine Abhängigkeit von Tabellen erforderlich ist. Jetzt, im Jahr 2012, da die gesamte Branche an IE6 / 7 vorbeikommt, rate ich dringend davon ab, Tische für 100% Höhe zu verwenden!
Vael Victus
4
Sie müssen <table> nicht verwenden, sondern können <div style = "display: table;" : D
Wilf
8

Verwenden Sie die absolute Position. Beachten Sie, dass wir es im Allgemeinen nicht gewohnt sind, Positionsabsolut zu verwenden, was das manuelle Auslegen von Dingen oder schwebende Dialoge erfordert. Dies wird automatisch verlängert, wenn Sie die Größe des Fensters oder des Inhalts ändern. Ich glaube, dass dies den Standardmodus erfordert, aber in IE6 und höher funktioniert.

Ersetzen Sie einfach das div durch die ID 'thecontent' durch Ihren Inhalt (die angegebene Höhe dient nur zur Veranschaulichung, Sie müssen keine Höhe für den tatsächlichen Inhalt angeben.

<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>

Dies funktioniert so, dass das äußere Div als Referenzpunkt für die Navigationsleiste fungiert. Das äußere Div wird durch den Inhalt des 'Content'-Div gestreckt. Die Navigationsleiste verwendet die absolute Positionierung, um sich auf die Höhe des übergeordneten Elements auszudehnen. Für die horizontale Ausrichtung versetzen wir den Inhaltsbereich selbst um die gleiche Breite der Navigationsleiste.

Dies wird mit dem CSS3-Flexbox-Modell erheblich vereinfacht, ist jedoch im IE noch nicht verfügbar und weist einige Besonderheiten auf.

tstanis
quelle
Hallo tstanis, ich habe auf IE6 getestet und die Navigationsleiste hat sich nicht gedehnt . Unter FireFox und Chrome funktioniert dies jedoch sehr gut.
Lucas Pottersky
Verwenden Sie in IE6 eine Tabelle, JavaScript oder einen Browserwechsel, es sei denn, Sie haben dies ein Dutzend Mal zuvor getan.
Aaron Digulla
7

Wenn Sie auf modernere Browser abzielen, kann das Leben sehr einfach sein. Versuchen:

.elem{    
    height: 100vh;
 }

Wenn Sie es bei 50% der Seite benötigen, ersetzen Sie 100 durch 50.

Adam Boostani
quelle
3
Dies setzt voraus, dass die Seitenhöhe der Bildschirmhöhe entspricht. Eine Seite kann oft viel länger sein als die Höhe des Bildschirms, weshalb wir nach unten scrollen.
TidyDev
6

Ich bin auf dasselbe Problem gestoßen wie Sie. Ich wollte ein machenDIV Hintergrund machen, warum, weil es einfach ist, div durch Javascript zu manipulieren. Sowieso drei Dinge, die ich in der CSS für diese Div getan habe.

CSS:

{    
position:absolute; 
display:block; 
height:100%; 
width:100%; 
top:0px; 
left:0px; 
z-index:-1;    
}
Talha
quelle
5

Ich möchte die gesamte Webseite abdecken, bevor ich ein modales Popup auffordere. Ich habe viele Methoden mit CSS und Javascript ausprobiert, aber keine davon hilft, bis ich die folgende Lösung gefunden habe. Es funktioniert bei mir, ich hoffe es hilft dir auch.

<!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>
Erweitern Sie das Snippet

Viel Glück ;-)

Chong Chern Dong
quelle
2 
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
Swadesh Behera
quelle
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>
Erweitern Sie das Snippet

reaw_ni
quelle
Bitte fügen Sie Ihrer Antwort eine Erklärung hinzu, die zeigt, was es tut und wie es das Problem löst
Unser Mann in Bananen
div "Seite" 100% Höhe jede Plattform. Kopieren Sie einfach js script in das <script> </ script> -Tag und fügen Sie es in den HTML-Code ein.
reaw_ni
0

Einfach, wickeln Sie es einfach in eine Tabelle div ...

Der HTML:

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

Das 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
quelle