web-dev-qa-db-fra.com

CSS Div stretch 100% hauteur de la page

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

Peut-on le faire en HTML/CSS?

cssheightmaxstretch
177
Tom

Voici la solution que j'ai finalement trouvée en utilisant une div comme conteneur pour un fond dynamique.

  • Supprimez le z-index pour les utilisations autres que l’arrière-plan.
  • Supprimez left ou right pour obtenir une colonne de hauteur complète.
  • Supprimez top ou bottom pour obtenir une ligne pleine largeur.

EDIT 1: CSS ci-dessous a été modifié car il ne s’affichait pas correctement dans FF et Chrome. a déplacé position:relative pour qu'il soit sur le code HTML et définissez le corps sur height:100% au lieu de min-height:100%.

EDIT 2: Ajout de commentaires supplémentaires à 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, la division de conteneur cloud est supprimée du contexte de présentation HTML. position: relative s'assure que la DIV reste à l'intérieur de la zone HTML lorsqu'elle est dessinée, de sorte que bottom:0 se réfère au bas de la zone HTML. Vous pouvez également utiliser height:100% sur le conteneur cloud, car il fait maintenant référence à la hauteur de la balise HTML et non à la fenêtre d'affichage.

161
Knyri

Avec HTML5, le moyen le plus simple est simplement de faire height: 100vh. Où "vh" correspond à la hauteur de la fenêtre d'affichage du navigateur. Réactive au redimensionnement du navigateur et des appareils mobiles.

71
alchuang

Vous pouvez tricher en utilisant Faux Columns Ou vous pouvez utiliser certains ruse CSS

13
Ryan Doherty

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

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

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

#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 attribuer à un élément parent (ou simplement un "corps") position: relative;

12
Nate Barr

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>

Quand la DIV a été introduite, les gens avaient tellement peur des tables que la pauvre DIV est devenue le marteau métaphorique.

8
Aaron Digulla

Utilisez la position absolue. Notez que ce n’est pas comme cela que nous sommes habitués à utiliser des positions absolues, ce qui nécessite de disposer manuellement les éléments ou d’avoir des dialogues flottants. Cela s'étire automatiquement lorsque vous redimensionnez la fenêtre ou le contenu. Je crois que cela nécessite le mode standard mais fonctionnera dans IE6 et supérieur.

Il suffit de remplacer la div par l'id 'thecontent' par votre contenu (la hauteur spécifiée il y a juste pour 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 la div externe sert de point de référence pour la barre de navigation. La div externe est étirée par le contenu de la div 'content'. La barre de navigation utilise un positionnement absolu pour s’étendre à la hauteur de son parent. Pour l'alignement horizontal, nous faisons en sorte que le contenu div soit décalé de la même largeur que la barre de navigation.

C’est beaucoup plus facile avec le modèle CSS3 flex box, mais il n’est pas encore disponible dans IE et possède certaines de ses particularités.

7
tstanis

J'ai rencontré le même problème que toi. Je voulais créer un DIV comme arrière-plan, car il est facile de manipuler div par javascript. En tout cas 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;    
}
5
Talha

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.

4
Adam Boostani

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

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>
1
Steffan Perry
 
           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>
1
reaw_ni
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
1
2lessons

Je veux couvrir toute la page Web avant de créer 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 tant que je n'ai pas trouvé la solution suivante. Cela fonctionne pour moi, j'espère que cela vous aidera 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>

Bonne chance ;-)

1
Chong Chern Dong