Salut J'ai un problème avec la hauteur html.html div en hauteur (%)
Ma taille est maintenant définie sur pixels et tout va bien. Mais quand je le mets en pourcentages, il ne montre pas:
J'ai besoin de hauteur pour s'adapter à mon écran, comme le fait la largeur.
Voici le CODE
Ce que je veux changer left et right hauteurs de div à un pourcentage pour adapter à l'écran. Quand je le fais, mon div disparaît.
Vérifiez cette fiddle. J'ai changé le CSS de cette façon:
html, body
{
height: 100%;
margin: 0;
padding: 0 ;
border: 0 none;
}
#footer
{
clear:both;
text-align:center;
background-color:#4671D5;
-moz-border-radius-bottomleft: 100px 50px;
border-bottom-left-radius: 100px 50px;
-moz-border-radius-bottomright: 100px 50px;
border-bottom-right-radius: 100px 50px;
}
#left
{
background-color:red;
height:100%;
width:80%;
float:left;
}
#right
{
background-color:blue;
float:left;
width:20%;
margin:0;
height:100%;
}
#header
{
background-color:#4671D5;
-moz-border-radius-topleft: 100px 50px;
border-top-left-radius: 100px 50px;
-moz-border-radius-topright: 100px 50px;
border-top-right-radius: 100px 50px;
height: 100%;
}
#container
{
width:98%;
padding-left:1%;
padding-right:1%;
height: 100%;
}
Cela fonctionne. :)
Bien sûr, ils disparaissent. Divs ou tout élément qui a display: block par défaut ont 100% largeur et hauteur automatique (défini par son contenu) alors quand vous dites que vous voulez 50% de hauteur qui ne signifie rien parce que 50% de auto est 0.
Si vous voulez définir la hauteur du div interne en pourcentage, vous devez d'abord définir sa hauteur parente, puis vos divs internes occuperont le pourcentage assigné de hauteur de son conteneur parent.
#container {
width:98%;
height:570px;
padding-left:1%;
padding-right:1%;
}
#left{ height:100% } mesurera sa hauteur en fonction de son parent div #container hauteur.
Je suis un peu en retard mais j'aurais pensé que c'est ce que vous cherchiez car il se développe et se rétrécit avec la taille de la fenêtre. Voici le jsfiddle pour cela.
Voici le HTML:
<html>
<body onload="initialize()">
<div id="container">
<div id="header">Header</div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="footer"> Footer</div>
</div>
</body>
</html>
Voici le CSS:
html, body
{
height:100%;
}
#container
{
height: 100%;
width:98%;
padding-left:1%;
padding-right:1%;
}
#header
{
height:10%;
background-color:blue;
}
#footer
{
height: 10%;
clear:both;
background-color:yellow;
}
#left
{
background-color:red;
height:80%;
width:70%;
float:left;
}
#right
{
background-color:green;
height:80%;
width:30%;
float:left;
}
oui cela fonctionne –
heureux que cela fonctionne. Merci. :) –