Pourcentage de hauteur HTML 5 / CSS
j'essaie de mettre un <div> à une certaine hauteur de pourcentage dans CSS, mais il reste juste la même taille que le contenu à l'intérieur. Quand je supprime le HTML 5 <!DOCTYTPE html> cependant, il fonctionne, le <div> prenant la page entière comme désiré. Je veux que la page soit validée, alors que dois-je faire?
j'ai ce CSS sur le <div> , qui a un ID de page :
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
4 réponses
je suis en train de mettre un div pour un certain pourcentage de la hauteur en CSS
pourcentage de quoi?
pour définir un pourcentage de hauteur, son élément parent(*) doit avoir une hauteur explicite. C'est assez évident, que si vous laissez la hauteur auto , le bloc va prendre la hauteur de son contenu... mais si le contenu lui-même a une hauteur exprimée en termes de pourcentage du parent vous avez fait vous-même un petit piège 22. Le navigateur abandonne et utilise simplement la hauteur du contenu.
ainsi le parent du div doit avoir une propriété explicite height . Tandis que la hauteur peut également être un pourcentage, si vous voulez, que déplacer le problème au niveau suivant.
si vous voulez faire de la hauteur div un pourcentage de la hauteur viewport, chaque ancêtre de la div, y compris <html> et <body> , doivent avoir height: 100% , Il ya donc une chaîne de des pourcentages explicites jusqu'à la div.
( * : ou, si le div est positionné, le "bloc contenant", qui est l'ancêtre le plus proche à placer également.)
alternativement, tous les navigateurs modernes et IE>=9 prennent en charge les nouvelles unités CSS relatives à la hauteur de viewport ( vh ) et à la largeur de viewport ( vw ):
div {
height:100vh;
}
Voir ici plus d'infos .
vous avez besoin de définir la hauteur sur les éléments <html> et <body> ainsi; sinon, ils ne seront assez grands pour s'adapter au contenu. par exemple :
<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>la réponse de bobince vous fera savoir dans quels cas" hauteur: XX%; " fonctionnera ou ne fonctionnera pas.
si vous voulez créer un élément avec un rapport défini (hauteur: % de sa propre largeur), la meilleure façon de le faire est de définir efficacement la hauteur en utilisant padding-bottom . Exemple pour carré:
<div class="square-container">
<div class="square-content">
<!-- put your content in here -->
</div>
</div>
.square-container { /* any display: block; element */
position: relative;
height: 0;
padding-bottom: 100%; /* of parent width */
}
.square-content {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
le contenant carré sera simplement fait de rembourrage, et le contenu s'étendra pour remplir le contenant. Article Long de 2009 sur ce sujet: http://alistapart.com/article/creating-intrinsic-ratios-for-video
vous pouvez utiliser 100vw / 100vh . CSS3 nous donne des unités relatives à viewport. 100vw signifie 100% de la largeur du champ de vision. 100vh; 100% de la hauteur.
<div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
<div style="width:70%; height: 100%; border: 2px dashed red"></div>
<div style="width:30%; height: 100%; border: 2px dashed red"></div>
</div>