CSS Div stretch 100% hauteur de la page

195

J'ai une barre de navigation sur le côté gauche de ma page, et je veux qu'elle s'étire jusqu'à 100% de la hauteur de la page. Pas seulement la hauteur de la fenêtre, mais également les zones cachées jusqu'à ce que vous faites défiler. Je ne veux pas utiliser javascript pour cela.

Peut-on le faire en HTML / CSS?

171

Voici la solution que j'ai finalement trouvée lors de l'utilisation d'un div comme conteneur pour un arrière-plan dynamique.

Retirer le z-index pour les utilisations non liées au fond.
Supprimer leftouright pour une colonne pleine hauteur.
Supprimer topou bottompour une ligne pleine largeur.

EDIT 1: CSS ci-dessous a été modifié car il ne s'affiche pas correctement dans FF et Chrome. déplacé position:relativepour être sur le HTML et définir le corps au height:100%lieu de min-height:100%.

EDIT 2: Ajout de commentaires supplémentaires au CSS. Ajout de quelques instructions supplémentaires ci-dessus.

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

Le html:

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

Pourquoi?

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

Sans cela, le DIV du conteneur cloud est supprimé du contexte de mise en page du HTML. position: relativegarantit que le DIV reste à l'intérieur de la zone HTML lorsqu'il est dessiné, ce qui bottom:0fait référence au bas de la zone HTML. Vous pouvez également l'utiliser height:100%sur le cloud-container car il fait désormais référence à la hauteur de la balise HTML et non à la fenêtre d'affichage.

Knyri
la source

c'est super, mais pas au centre. une solution pour ça? marge: 0 auto; ne fonctionne pas.

crème

Réponse géniale. J'ai cependant remarqué que vous devez utiliser min-height (et pas seulement height) sur l' htmlélément. Pourquoi donc?

HartleySan

Utiliser, heightc'est dire que vous êtes si grand; Ni plus ni moins.' Ce qui signifie que ce sera la hauteur de la fenêtre. Nous voulons qu'elle soit au moins aussi haute que la fenêtre ou plus haute. min-heightle fait bien.

Knyri

1

Le z-index est là car il s'agit d'un extrait d'un arrière-plan mobile que j'ai fait et je voulais m'assurer que le div restait en arrière-plan. Ce n'est pas nécessaire pour les éléments normaux.

Knyri

5

C'est excellent. Je fais du CSS depuis 15 ans et je n'ai jamais cliqué sur le fait que le positionnement vers <html>et la position dans la fenêtre étaient deux choses distinctes. Je vous remercie!

Ben Hull

80

Avec HTML5, la façon la plus simple est simplement de le faire height: 100vh. Où «vh» représente la hauteur de la fenêtre d'affichage de la fenêtre du navigateur. Adapté au redimensionnement du navigateur et des appareils mobiles.

alchuang
la source

39

Manquer complètement le point. OP demande la hauteur de la page, pas la hauteur de la fenêtre / fenêtre.

Greg

9

Hauteur du document, pas la hauteur de la fenêtre.

punkbit

7

même commentaire que ci

ericn

11

J'ai mal lu la question à la hâte et j'ai trouvé cette réponse utile. Merci d'avoir fait la même erreur que moi, mais maintenant j'aimerais suggérer que cette réponse soit modifiée pour inclure cette mise en garde.

durette

Au fait, je l'ai regardé, il y en a aussi vw.

Aaron Franke

14

J'ai eu un problème similaire et la solution était de le faire:

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

Je voulais un div centré sur la page avec une hauteur de 100% de la hauteur de la page, donc ma solution totale était:

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

Vous devrez peut-être faire en sorte qu'un élément parent (ou simplement «corps») ait position: relative;

Nate Barr
la source

16

Pourquoi tout le monde l'appelle un cloud-container?

Wilf

C'est sympa! Ignorer la fixation de la hauteur est une idée géniale en fait et je n'ai pas encore remarqué de bug avec. Aimer. BAISER! Merci pour le bonhomme!

daneczech

13

Vous pouvez tricher en utilisant des fausses colonnes ou vous pouvez utiliser une astuce CSS

Ryan Doherty
la source

1

Notez cependant que la supercherie CSS vous donnera des colonnes de hauteur égale, mais pas des colonnes à 100% de hauteur.

thedz

Si la barre de navigation s'étend jusqu'à la hauteur du contenu, ce qui détermine la hauteur de la page, elle vous donnera 100% de hauteur.

Ryan Doherty

1

-1 pour ne pas avoir fourni un moyen 100% sécurisé pour s'assurer que la barre de navigation est toujours suffisamment haute.

Aaron Digulla

lien mort: ((((

JB est

9

C'est simple en utilisant une table:

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

Lorsque DIV a été introduit, les gens avaient tellement peur des tables que le pauvre DIV est devenu le marteau métaphorique.

Aaron Digulla
la source

6

Bien que les DIV et les styles fluides soient excellents, je pense que CSS ne parvient toujours pas à capturer l'essence de la disposition de l'écran de la même manière que TABLE atteint l'essence de la disposition des tableaux. ... Et la disposition des tableaux est toujours une façon acceptable de faire les choses.

Jeff Meatball Yang

8

Les tableaux sont destinés aux données tabulaires, pas à la mise en page. Cela étant dit, CSS présente quelques lacunes majeures en ce qui concerne la question séculaire de la hauteur à 100%. Je dois admettre que j'ai utilisé cette solution dans un délai serré, mais j'ai toujours eu l'impression d'abandonner.

Scott Greenfield

6

@Scott: J'ai une fois perdu trois semaines à essayer d'obtenir une conception à 100% de la hauteur dans trois principaux navigateurs. Je ne peux vraiment plus entendre les conneries "les tables sont mauvaises" :-( Même avec mes connaissances, utiliser les DIVs est beaucoup trop compliqué.

Aaron Digulla

1

Une bonne planification garantit qu'aucune dépendance aux tables n'est nécessaire. Maintenant en 2012, avec l'industrie dans son ensemble dépassant IE6 / 7, je déconseille fortement d'utiliser des tables à 100% de hauteur!

Vael Victus

4

Vous n'avez pas besoin d'utiliser <table>, vous pouvez utiliser <div style = "display: table;" : D

Wilf

8

Utilisez la position absolue. Notez que ce n'est pas ainsi que nous sommes généralement habitués à utiliser la position absolue, ce qui nécessite de disposer manuellement les choses ou d'avoir des boîtes de dialogue flottantes. Cela s'étirera automatiquement lorsque vous redimensionnerez la fenêtre ou le contenu. Je crois que cela nécessite un mode standard mais fonctionnera dans IE6 et supérieur.

Remplacez simplement le div par l'id 'thecontent' par votre contenu (la hauteur spécifiée est juste pour l'illustration, vous n'avez pas besoin de spécifier une hauteur sur le contenu réel.

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

La façon dont cela fonctionne est que le div externe sert de point de référence pour la barre de navigation. Le div extérieur est étiré par le contenu du div «contenu». La barre de navigation utilise un positionnement absolu pour s'étirer jusqu'à la hauteur de son parent. Pour l'alignement horizontal, nous divisons le contenu par la même largeur de la barre de navigation.

Cela est rendu beaucoup plus facile avec le modèle de boîte flexible CSS3, mais ce n'est pas encore disponible dans IE et a certaines de ses propres bizarreries.

tstanis
la source

Salut tstanis, j'ai testé sur IE6 et la barre de navigation ne s'étirait pas . Sur FireFox, Chrome, cela fonctionne très bien.

Lucas Pottersky

Sur IE6, utilisez une table ou JavaScript ou un commutateur de navigateur, sauf si vous l'avez fait une douzaine de fois auparavant.

Aaron Digulla

6

J'ai rencontré le même problème que toi. Je voulais faire unDIV arrière-plan, pourquoi, parce que c'est facile à manipuler div via javascript. Quoi qu'il en soit, trois choses que j'ai faites dans le CSS pour cette div.

CSS:

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

Talha
la source

6

Si vous ciblez des navigateurs plus modernes, la vie peut être très simple. essayer:

.elem{    
    height: 100vh;
 }

si vous en avez besoin à 50% de la page, remplacez 100 par 50.

Adam Boostani
la source

3

Cela suppose que la hauteur de la page est la même que la hauteur de l'écran. Une page peut souvent être beaucoup plus longue que la hauteur de l'écran, c'est pourquoi nous faisons défiler vers le bas.

TidyDev

5

Je veux couvrir toute la page Web avant d'inviter une fenêtre contextuelle modale. J'ai essayé de nombreuses méthodes en utilisant CSS et Javascript, mais aucune d'entre elles ne m'aide jusqu'à ce que je trouve la solution suivante. Cela fonctionne pour moi, j'espère que cela vous aide aussi.

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

Développer l'extrait

Bonne chance ;-)

Chong Chern Dong
la source

2

* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}

Swadesh Behera
la source

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>

Développer l'extrait

reaw_ni
la source

veuillez ajouter quelques explications à votre réponse, en montrant ce qu'elle fait et comment elle résout le problème

Our Man in Bananas

div "page" 100% hauteur toute plateforme. il suffit de copier le script js dans la balise <script> </script> et de le coller dans le code HTML.

reaw_ni

0

Simple, il suffit de l'envelopper dans un div de table ...

Le HTML:

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

Le 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
la source

CSS Div stretch 100% hauteur de la page

Réponses: