Comment faire un div à 100% de la hauteur de la fenêtre du navigateur

J'ai une mise en page à deux colonnes de gauche div et un droit div.

Le droit div a un gris background-color, et j'en ai besoin pour s'étendre verticalement en fonction de la hauteur de l'utilisateur de la fenêtre du navigateur. Droit maintenant, le background-color se termine au dernier morceau de contenu que div.

J'ai essayé height:100%, min-height:100%;, etc.

InformationsquelleAutor mike | 2009-10-15
  1. 2712

    Il ya un couple de CSS 3 unités de mesure, appelée:

    Fenêtre d'affichage de Pourcentage (ou Fenêtre d'affichage Relatif) Longueurs

    Quels sont Viewport Pourcentage des Longueurs?

    De la liés W3 Candidat à la Recommandation ci-dessus:

    De la fenêtre d'affichage de pourcentage de la longueur par rapport à la taille de la première contient un bloc. Lorsque la hauteur ou la largeur de la première contenant le bloc est modifié, ils sont mis à l'échelle en conséquence.

    Ces unités sont vh (fenêtre d'affichage de la hauteur), vw (largeur de visualisation), vmin (viewport longueur minimale) et vmax (viewport longueur maximale).

    Comment cela peut-il être utilisé pour faire un diviseur de remplir la hauteur du navigateur?

    Pour cette question, nous pouvons faire usage de vh: 1vh est égal à 1% de la fenêtre d'affichage de la hauteur. C'est-à-dire, 100vh est égale à la hauteur de la fenêtre du navigateur, indépendamment de l'endroit où l'élément est situé dans l'arborescence DOM:

    HTML

    <div></div>

    CSS

    div {
    height: 100vh;
}

    C'est littéralement tout ce qui est nécessaire. Voici une JSFiddle exemple de cette utilisation.

    Ce que les navigateurs prennent en charge ces nouvelles unités?

    C'est actuellement pris en charge sur tous les up-to-date, les principaux navigateurs du marché en dehors de Opera Mini. Découvrez Puis-je utiliser... pour un soutien supplémentaire.

    Comment cela peut-il être utilisé avec plusieurs colonnes?

    Dans le cas de la question à portée de main, avec un gauche et un droit de diviseur, voici une JSFiddle exemple montrant une disposition en deux colonnes, impliquant à la fois vh et vw.

    Comment est 100vh différentes pour 100%?

    Prendre cette mise en page, par exemple:

    <body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

    La p tag ici est défini à 100% de la hauteur, mais parce que son contenant div a 200 pixels de hauteur, 100% de 200 pixels devient 200 pixels, pas 100% de la body hauteur. À l'aide de 100vh au lieu de cela signifie que le p balise sera de 100% de la hauteur de la body quel que soit le div hauteur. Jetez un oeil à ce accompagnement JSFiddle facilement voir la différence!

    • Comportement étrange avec le défilement lorsque l'élément est en fait plus grand que la fenêtre d'affichage. Le conteneur maintient la hauteur de la fenêtre d'affichage et le contenu des flux hors du conteneur. min-height:100vh semble pour contourner ce problème.
    • Fenêtre d'affichage de Pourcentage n'ont pas assez de soutien pour être utilisé dans un environnement de production. Vous devez écrire un repli de tous les temps, ce qui finit par créer plus de désordre que si vous aviez tout simplement pas utilisé VP.
    • la suite sur: il y a beaucoup d'autres solutions qui fonctionnent aussi loin que IE5, donc il n'était pas besoin pour moi de répéter ce que les autres ont déjà dit. Cette réponse est assez solide pour la majorité des navigateurs, publié dans les 3 dernières années, depuis que la norme a été introduite.
    • En fait je faisais allusion à des mobiles qui VPs ne sont pas pris en charge sur. Avec la quantité d'utilisateurs qui utilisent des téléphones mobiles (30% +), je pense que ignorant plus d'un tiers des utilisateurs peut être considéré comme un non-fonctionnement de réponse.
    • cela fonctionne sur iOS Safari 6+, Navigateur Android 4.4+, Navigateur BlackBerry 10.0 et IEMobile 10.0. Je ne sais pas quel navigateur mobile vous avez fait référence, mais ces 4 représentent plus de 90% des navigateurs mobiles utilisés. Cette question n'indique pas une exigence pour le travail sur les navigateurs mobiles.
    • Ok, mais la réponse est encore très myope et ne fonctionne que dans de très rares cas. Flexbox CSS (philipwalton.github.io/résolu-par-flexbox/demos/collant-pied de page) serait de couvrir cette réponse et plus.
    • encore une fois c'est pas la question, j'ai répondu ici. C'est une autre question tout à fait, dont la réponse n'est, en effet, utiliser flexbox: stackoverflow.com/questions/90178/...
    • vous avez besoin de voir ce caniuse.com/#feat=viewport-units et de faire desigion
    • selon puis-je Utiliser... il fonctionne sur tous les up-to-date de navigateurs mobiles à l'exception de Opera Mini.
    • Vous devez également définir body { margin: 0 } car même en cas de box-sizing: border-box, la marge n'est pas inclus dans la mesure.
    • VH n'est pas égal à hauteur de la fenêtre du navigateur. C'est de la fenêtre d'affichage de la hauteur.
    • la fenêtre d'affichage de la hauteur est égale à la hauteur de la fenêtre (viewport) le site affiche dans un navigateur web. C'est ce que je voulais dire par "la hauteur de la fenêtre du navigateur", beaucoup plus en termes de base.
    • Oui, je sais. Mais ce n'est pas la réponse à cette question. Navigateur hauteur de la fenêtre comprend la barre de navigation de hauteur. Ce serait mieux, parce que sur les navigateurs mobiles, hauteur de la fenêtre d'affichage change à chaque fois que la barre de navigation affiche/masque.
    • Alerte Mobile: à l'aide de vh mess with Chrome mobile qui permet de ne pas tenir compte de sa barre de navigation. Il a ensuite recouvrir le dessus de votre page avec elle. Un grave problème si vous avez un menu...
    • à l'aide de box-sizing: border-box contribuerait à éviter, y compris border et paddings à height et width. à Propos de la boîte de dimensionnement
    • Saint graal! vous avez sauvé ma journée.. j'ai essayé d'appliquer un dégradé à l'ensemble de fond et j'ai vu une scission à une certaine hauteur. Après le réglage de la hauteur de 100vh, sa belle apparence
    • Extrêmement utile! M'a permis de ferraille, de nombreuses lignes de JS et facilement faire un en-tête avec une hauteur min pour mobile, hauteur max pour ordinateur de bureau, et l'auto-réglage de la gamme de hauteurs entre les deux pour les tablettes, le tout avec seulement quelques simples déclarations: #header {height: 20vw; min-height: 64px; max-height: 128px; transition: 0.4s;}

    InformationsquelleAutor James Donnelly
  2. 553

    Si vous souhaitez définir la hauteur d'un <div> ou de tout élément, vous devez définir la hauteur de <body> et <html> à 100% aussi. Ensuite, vous pouvez régler la hauteur de l'élément à 100% 🙂

    Voici un exemple:

    body, html {
  height: 100%;
}

#right {
  height: 100%;
}
    • Corrigez-moi si je me trompe, Mais je pense que vous devez également définir la hauteur à tous les parents de la div, de travailler
    • Cela ne fonctionnera pas si je suis en utilisant la poursuite de la conception: page 6000px hauteur, avec des blocs représentant pages. J'en veux un bloc exactement la fenêtre d'affichage de la hauteur.
    • vous êtes de droite. Vous avez besoin de régler la hauteur à tous les parents de la div, avec les implications de tout, d'avoir la hauteur de l'écran. Voici un exemple.
    • Cette astuce de travail pour certains cas, mais ce ne serait pas pour certains cas, Si vous recherchez pour la compatibilité ou plus recommandé manière, vous pouvez afficher @James, de la Réponse ci-dessus 🙂 en Utilisant la Fenêtre d'affichage du Pourcentage de la Méthode 🙂 , ça devrait fonctionner aussi. cheers
    • voici la solution. Ensemble css, comme ça: html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }. Donc, si vous avez 3 sections, il sera html { height: 300%; } body { height: 100%; } #div { height: 33.3% }
    InformationsquelleAutor Ariona Rian
  3. 274

    Si vous en avez la possibilité absolument position de vos éléments,

    position: absolute;
top: 0;
bottom: 0;

    le ferait.

    • Cela fonctionne par la prise de l'élément de flux de documents et consolidant sa valeur inférieure à la hauteur de son parent. Ce n'est pas l'idéal lorsque votre contenu dépasse la hauteur de son parent.
    • Cela ne fonctionne pas, lorsque l'un des parents est définie à position:relative et sa hauteur n'est pas à 100% de la fenêtre d'affichage. Il va ajuster le haut et le bas c'est la prochaine relative ou absolue ancêtre.
    InformationsquelleAutor Tinister
  4. 138

    Vous pouvez utiliser le port de l'unité dans le CSS:

    HTML:

    <div id="my-div">Hello World!</div>

    CSS:

    #my-div {
    height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */
}
    • Vous devez utiliser * { box-sizing: border-box; } pour empêcher que cela se produise.
    • La peine de vérifier caniuse pour la prise en charge du navigateur sur la fenêtre d'affichage unités: caniuse.com/#feat=viewport-units
    InformationsquelleAutor MrGeek
  5. 119

    Vous pouvez utiliser vh dans ce cas qui est relatif à 1% de la hauteur de la fenêtre d'affichage...

    Qui signifie que si vous voulez couvrir la hauteur, tout simplement utiliser 100vh.

    Regardez l'image ci-dessous je dessine pour vous ici:

    Comment faire un div à 100% de la hauteur de la fenêtre du navigateur

    Essayez l'extrait de code que j'ai créé pour vous en tant que ci-dessous:

    CSS:

    .left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

.right {
  height: 100vh;
  width: 50%;
  background-color: red;
  float: right;
}

    HTML:

    <div class="left"></div>
<div class="right"></div>

    • Donner 100vh ajouté un défilement vertical de la page , pour suivre celui-ci, mais n'a pas fonctionné. stackoverflow.com/questions/44645465/.... Est-il un moyen pour éviter le défilement vertical et ont la div touche le fond sans contenu ?
    • regardez pour les paddings/margins
    • à la racine du fichier, j'ai essayé de donner comme * {margin: 0, padding: 0}, mais n'a pas fonctionné
    • jetez un oeil à cet exemple fourni par Alireza, il dispose également d'une barre de défilement parce que le corps de l'élément a de la marge. Si vous retirez la marge de la barre de défilement est allé. Il peut avoir différentes causes, mais celui-ci je voudrais la caisse en premier.
    InformationsquelleAutor Alireza
  6. 95

    Toutes les autres solutions, y compris le haut-voté un avec vh sont sous-optimales, comparativement à la modèle flex solution.

    Avec l'avènement de la CSS modèle flex, la résolution de l'100% de la hauteur problème devient très, très simple: utiliser height: 100%; display: flex sur le parent, et flex: 1 sur les éléments d'enfant. Ils vont automatiquement occuper tout l'espace disponible dans leur conteneur.

    Remarque comment de simples le balisage et le CSS sont. Pas de table des hacks ou quoi que ce soit.

    Le modèle flex est pris en charge par tous les principaux navigateurs ainsi que IE11+.

    CSS:

    html, body {
  height: 100%;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}

    HTML:

    <div class="left">left</div>
<div class="right">right</div>

    En savoir plus sur la modèle flex ici.

    • un mot d'avertissement: lorsque le contenu de l'un de la gauche/droite conteneurs dépasse l'original de la hauteur du corps, à l'opposé de conteneur ne sera pas redimensionnée, de sorte que les conteneurs jusqu'à la fin avec des hauteurs différentes alors.
    • Exemple de problème Schellmax souligne: jsfiddle.net/Arete/b4g0o3pq
    • Selon la conception, overflow-y: auto; peut éviter les "conteneurs dépasse l'original de la hauteur du corps".
    InformationsquelleAutor Airen
  7. 54

    Vous n'avez pas de mentionner quelques détails importants comme:

    • Est la mise en page à largeur fixe?
    • Sont l'une ou les deux colonnes de largeur fixe?

    Voici une possibilité:

    CSS:

    body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; // width optional
}

#left {
  background: yellow;
  float: left;
  width: 360px; // width optional but recommended 
}

#right {
  background: grey;
  margin-left: 360px; // must agree with previous width 
}

    HTML:

    <html>
<head>
  <title>Example</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>
</body>

</html>

    Il existe de nombreuses variations de cette fonction sur les colonnes qui doivent être fixés et qui sont liquides. Vous pouvez faire cela avec un positionnement absolu aussi, mais j'ai trouvé généralement de meilleurs résultats (notamment en termes de cross-browser) à l'aide de flotteurs place.

    InformationsquelleAutor cletus
  8. 33

    C'est ce qui a fonctionné pour moi:

    HTML:

    <div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>

    Utilisation position:fixed au lieu de position:absolute, de cette façon, même si vous faites défiler la division de l'étendre à l'extrémité de l'écran.

    InformationsquelleAutor Majda
  9. 29

    Voici un correctif pour la hauteur.

    Dans votre CSS utilisation:

    #your-object: height: 100vh;

    Pour les navigateurs qui ne supportent pas vh-units, l'utilisation de modernizr.

    Ajouter ce script à ajouter la détection de vh-units)

    //https://github.com/Modernizr/Modernizr/issues/572
//Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);

        bool= !!(compStyle == height);
    });
    return bool;
});

    Enfin utiliser cette fonction pour ajouter de la hauteur de la fenêtre d'affichage pour #your-object si le navigateur ne prend pas en charge vh-units:

    $(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});
    InformationsquelleAutor Jonas Sandstedt
  10. 23

    100% fonctionne différemment pour la largeur et la hauteur.

    Lorsque vous spécifiez width: 100%, il signifie "prendre jusqu'à 100% de la largeur de l'élément parent ou la largeur de la fenêtre."

    Lorsque vous spécifiez height: 100%, il signifie seulement "prendre jusqu'à 100% de la hauteur disponible à partir de l'élément parent." Cela signifie que si vous ne spécifiez pas une hauteur à un élément de niveau supérieur, la hauteur de tous les enfants seront soit 0 de hauteur ou de la mère, et c'est pourquoi vous devez définir l'élément supérieur d'avoir un min-height de la hauteur de la fenêtre.

    J'ai toujours spécifier le corps pour avoir un min-height de 100vh et il fait de positionnement et de calculs faciles,

    body {
  min-height: 100vh;
}
    InformationsquelleAutor Dinesh Pandiyan
  11. 17

    Ajouter min-height: 100% et de ne pas spécifier une hauteur (ou le mettre sur auto). Il a totalement fait le travail pour moi:

    .container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}
    InformationsquelleAutor Remus Simion
  12. 15

    100vw === 100% de la largeur de la fenêtre d'affichage.

    100vh === 100% de la hauteur de la fenêtre d'affichage.

    Si vous souhaitez définir la div la largeur ou la hauteur de 100% de navigateur-fenêtre-taille:

    Pour la largeur: 100vw

    À la hauteur: 100vh

    Ou si vous voulez en faire plus petite taille, utiliser le CSS calc fonction. Exemple:

    #example {
    width: calc(100vw - 32px)
}
    InformationsquelleAutor Руслан
  13. 12

    Plusieurs méthodes sont disponibles pour le réglage de la hauteur d'un <div> à 100%.

    Méthode (A):

    CSS:

    html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100%;
  width: 50%;
  background: green;
}
.div-right {
  height: 100%;
  width: 50%;
  background: gray;
}

    HTML:

    <div class="div-left"></div>
<div class="div-right"></div>

    Méthode (B) à l'aide de vh:

    CSS:

    html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100vh;
  width: 50%;
  background: green;
  float: left;
}
.div-right {
  height: 100vh;
  width: 50%;
  background: gray;
  float: right;
}

    HTML:

    <div class="div-left"></div>
<div class="div-right"></div>

    Méthode (c) à l'aide de flex zone:

    CSS:

    html,
body {
  height: 100%;
  min-height: 100%;
}
.wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}
.div-left {
  width: 50%;
  background: green;
}
.div-right {
  width: 50%;
  background: gray;
}

    HTML:

    <div class="wrapper">
  <div class="div-left"></div>
  <div class="div-right"></div>
</div>

    InformationsquelleAutor Santosh Khalse
  14. 12

    Cela a fonctionné pour moi:

    html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

    Prises de cette page.

    InformationsquelleAutor testing
  15. 11

    Essayer de mettre height:100% dans html & body 

    html, 
body {
    height: 100%;
}

    Et si vous souhaitez 2 div hauteur même utilisation ou de l'ensemble de l'élément parent display:flex propriété.

    InformationsquelleAutor Mohammed Javed
  16. 8

    Suffit d'utiliser le "vh" unité au lieu de "px", ce qui signifie vue-port de la hauteur. 

    height: 100vh;
    InformationsquelleAutor khalifeh
  17. 7

    Les éléments de bloc de consommer la totalité de la largeur de son parent par défaut.

    C'est la façon de répondre à leurs exigences en matière de conception, qui est d'empiler verticalement.

    9.4.1 Bloc de mise en forme
    contextes

    Dans un bloc de mise en forme contexte, les boîtes sont disposées l'une après l'autre,
    verticalement, en commençant par le haut d'un bloc contenant.

    Ce comportement, cependant, ne s'étend pas à la hauteur.

    Par défaut, la plupart des éléments sont à la hauteur de leur contenu (height: auto).

    Contrairement à avec la largeur, vous devez spécifier une hauteur si vous voulez plus d'espace.

    Par conséquent, de conserver ces deux choses à l'esprit:

    • sauf si vous voulez toute la largeur, vous devez définir la largeur d'un élément de bloc
    • sauf si vous voulez que le contenu de la hauteur, vous devez définir la hauteur d'un élément

    CSS:

    .Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}

.left {
  flex: 0 0 60%;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: pink;
}

body { margin: 0; } /* remove default margins */

    HTML:

    <div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>

    InformationsquelleAutor Michael_B
  18. 7

    Ici est quelque chose qui n'est pas exactement comme ce qu'on avait dans les précédentes réponses, mais il pourrait être utile pour certains:

    body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

    https://jsfiddle.net/newdark/qyxkk558/10/

    InformationsquelleAutor brand-it
  19. 6

    Utilisation FlexBox CSS

    Flexbox est un ajustement parfait pour ce type de problème. Bien que surtout connu pour la pose de contenu, dans le sens horizontal, Flexbox en fait, il fonctionne tout aussi bien pour les problèmes de mise en page. Tout ce que vous avez à faire est de conclure les sections verticales dans un conteneur flex et de choisir ceux que vous souhaitez développer. Ils vont automatiquement occuper tout l'espace disponible dans leur conteneur.

    InformationsquelleAutor robross0606
  20. 6

    L'une des options à l'aide de CSS table. Il a une grande prise en charge du navigateur et fonctionne même dans Internet Explorer 8.

    JSFiddle Exemple

    CSS:

    html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
}
.right {
  background: grey;
}

    HTML:

    <div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

    InformationsquelleAutor Stickers
  21. 5

    Essayer ce - testé:

    body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}
    InformationsquelleAutor lukaszkups
  22. 5

    Vous pouvez utiliser display: flex et height: 100vh

    CSS:

    html, body {
  height: 100%;
  margin: 0px;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}

    HTML:

    <div class="left">left</div>
<div class="right">right</div>

    • Il y a déjà plusieurs flexbox solutions postés, dont une avec cette exacte de mise en œuvre posté que 26 jours avant cette réponse.
    InformationsquelleAutor Thuc Nguyen
  23. 5

    Vous avez besoin de faire deux choses, l'une est à la hauteur de 100%, que vous l'avez déjà fait. La deuxième est de définir la position à l'absolu. Cela devrait faire l'affaire.

    html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

    Source

    • Obsolète solution. Utilisation vh à la place.
    • N'utilisez pas de vh si vous prévoyez d'utiliser le responsive design sur des appareils mobiles.
    InformationsquelleAutor Prabhakar Undurthi
  24. 5

    Essayer le code CSS suivant:

    html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}
    InformationsquelleAutor ProblemChild
  25. 5

    En fait ce qui a fonctionné pour moi le meilleur est à l'aide de la vh propriété.

    Dans mon Réagir les applications que je voulais la div pour correspondre à la page élevé, même lorsque redimensionnée. J'ai essayé height: 100%;, overflow-y: auto;, mais aucun d'entre eux travaillaient lors de la configuration de height:(your percent)vh; cela a fonctionné comme prévu.

    Remarque: si vous utilisez un rembourrage, coins arrondis, etc., assurez-vous de soustraire les valeurs de votre vh propriété pour cent, ou ajoute de la hauteur et de faire des barres de défilement apparaissent. Voici mon exemple:

    .frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}
    • Par ailleurs, vous parler des "coins arrondis" touchant à la hauteur de votre élément, je m'attends à réglage box-sizing: border-box; permettrait de surmonter cela, cela signifie que la taille de la bordure est également prise en compte pour le calcul de la taille (largeur et hauteur) de l'élément.
    InformationsquelleAutor JimmyFlash
  26. 2

    Si vous utilisez position: absolute; et jQuery, vous pouvez utiliser

    $("#mydiv").css("height", $(document).height() + "px");
    • Il n'est pas nécessaire pour le JavaScript. La solution moderne est d'utiliser le CSS flex modèle de boîte.
    • Si vous utilisez le JS, j'ai trouvé ceci pour être tout à fait utile. NOTE: son battu pour l'utiliser avec d' $( window ).load(), que vous obtiendrez des résultats différents étant renvoyée à l'aide de la touche F5 ou CTRL+F5. Suivez ce lien pour plus d'info. stackoverflow.com/questions/13314058/...
    InformationsquelleAutor John Smith Optional
  27. 2

    HTML

       //vw: hundredths of the viewport width.
   //vh: hundredths of the viewport height.
   //vmin: hundredths of whichever is smaller, the viewport width or height.
   //vmax: hundredths of whichever is larger, the viewport width or height.

<div class="wrapper">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right
    </div>
</div>

    CSS

    <style>
    .wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: 100vh; //Height window (vh)
    }
    .wrapper .left{
        widht: 80%; //Width optional, but recommended
    }
    .wrapper .right{
        widht: 20%; //Width optional, but recommended
        background-color: #dd1f26;
    }
<style>
    • Faute d'orthographe Possible: widht (vers la fin)
    InformationsquelleAutor RamNiwas Sharma
  28. 2

    Ce genre de choses va redimensionner la hauteur de contenu automatiquement en fonction de
    votre navigateur. J'espère que cela fonctionnera pour vous. Juste essayer cet exemple
    étant donné ci-dessous.

    Vous avez à mettre en place seulement height:100%.

    CSS:

    html,body {
  height: 100%;
  margin: 0;
}
.content {
  height: 100%;
  min-height: 100%;
  position: relative;
}
.content-left {
  height: auto;
  min-height: 100%;
  float: left;
  background: #ddd;
  width: 50%;
  position: relative;
}

#one {
  background: url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png) center center no-repeat scroll  #aaa;
  width: 50%;
  position: relative;
  float: left;
}

#two {
 background: url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png) center center no-repeat scroll #520E24;
  width: 50%;
  float: left;
  position: relative;
  overflow-y: scroll;
}

    HTML:

    <div class='content' id='one'></div>
<div class='content-left' id='two'></div>

    InformationsquelleAutor Rudra
  29. 1

    Plus simple:

    CSS:

    html,
body {
  height: 100%;
  min-height: 100%;
}
body {
  position: relative;
  background: purple;
  margin: 0;
  padding: 0;
}
.fullheight {
  display: block;
  position: relative;
  background: red;
  height: 100%;
  width: 300px;
}

    HTML:

    <html class="">

<body>
  <div class="fullheight">
    This is full height.
  </div>
</body>

</html>

    InformationsquelleAutor Tony Smith
  30. 1

    Essayer Cette Fois...

    CSS:

    *{
  padding:0;
  margin:0;
}
.parent_div{
  overflow:hidden;
  clear:both;
  color:#fff;
  text-align:center;
}

.left_div {
  float: left;
  height: 100vh;
  width: 50%;
  background-color: blue;

}

.right_div {
  float: right;
  height: 100vh;
  width: 50%;
  background-color: green;

}

    HTML:

    <div class=" parent_div">
  <div class="left_div">Left</div>
  <div class="right_div">Right</div>
</div>

    InformationsquelleAutor Sunil Rajput
  31. 0

    Même si cette solution est de faire avec jQuery, je même si elle peut être utile pour quiconque fait de colonnes pour les adapter à la taille de l'écran.

    Pour les colonnes à partir du haut de la page, cette solution est la plus simple.

    body,html{
  height:100%;
}

div#right{
  height:100%
}

    Pour les colonnes qui sont pas à partir du haut de la page (par exemple: si on commence en dessous de l'en-tête).

    <script>
     $(document).ready(function () {
        var column_height = $("body").height();
        column_height = column_height - 100; //100 is the header height
        column_height = column_height + "px";
        $("#column").css("height",column_height);
    });
</script>

    Première méthode s'applique la hauteur du corps et les colonnes, ce qui signifie que c'est starting_pixels + height100%.

    La deuxième méthode est la hauteur de la page affichée à l'utilisateur par l'obtention de la hauteur du corps, puis soustrait la taille d'en-tête de savoir comment beaucoup de hauteur est vers la gauche pour afficher la colonne.

    • J'ai fait quelques modifications, mais c'est un excellent moyen pour obtenir la div à la taille de la fenêtre et fonctionne de manière dynamique bien. Le 100% sera rendu qu'une seule fois, afin de multiples écrans ne fonctionnent pas. Je voudrais ajouter un $(window).redimensionner(function() { ainsi. Il a la même apparence moins ce que j'ai ajouté.
    • Pas besoin de JavaScript. La solution moderne est l'utilisation la plus simple CSS flex modèle de boîte.
    InformationsquelleAutor zurfyx
  32. 0

    Vous pouvez utiliser les CSS pour faire un div à 100% de la hauteur de la fenêtre du navigateur:

    display: block;
position: relative;
bottom: 0;
height: 100%;
    InformationsquelleAutor mohammad nazari