web-dev-qa-db-fra.com

Hauteur DIV définie en pourcentage de l'écran?

Je cherche à définir un DIV parent à 70% de la hauteur totale de l'écran à 100%. J'ai défini les CSS suivants mais cela ne semble rien faire:

body {
font-family: 'Noto Sans', sans-serif;
margin: 0 auto;
height: 100%;
width: 100%;
}
.header {
height: 70%;
}

Pour une raison quelconque, cela ne semble pas fonctionner et l'en-tête ne représente pas 70% de la taille de l'écran. Aucun conseil?

htmlcsshtml5css3
59
EdzJohnson

Essayez d'utiliser Viewport Height

div {
    height:100vh; 
}

Il est déjà discuté ici en détail

145
Salman

faire la position absolute pour cette div.

http://jsfiddle.net/btevfik/KkKeZ/

6
btevfik

C'est la solution,

Ajoutez le html également à 100%

html,body {

   height: 100%;
   width: 100%;

}
6
Human Being

Si vous le souhaitez en fonction de la hauteur de l'écran et non de la hauteur de la fenêtre:

const height = 0.7 * screen.height

// jQuery
$('.header').height(height)

// Vanilla JS
document.querySelector('.header').style.height = height + 'px'

// If you have multiple <div class="header"> elements
document.querySelectorAll('.header').forEach(function(node) {
  node.style.height = height + 'px'
})
1
aleclarson

En utilisant le positionnement absolu, vous pouvez faire <body> ou <form> ou <div>, convient à la page de votre navigateur. Par exemple:

<body style="position: absolute; bottom: 0px; top: 0px; left: 0px; right: 0px;">

et puis simplement mettre un <div> à l'intérieur et utilisez le pourcentage de height ou width souhaité

<div id="divContainer" style="height: 100%;">
0
Arash moradabadi