J'ai un en-tête sur ma page qui est juste au-dessus de 100px (111px pour être exact). Le problème réside dans le fait que je ne peux pas spécifier top et bottom dans ie6 (bug).
Je peux soit spécifier top: 111px ou bottom: 0px, mais j’ai encore besoin que la hauteur soit correcte, 100% -111px, en fonction de la taille de la fenêtre.
Je n'arrive pas à avoir les expressions qui fonctionnent, car cela semble être la solution
Voici mon code CSS:
position: absolute;
width: 200px;
top: 111px;
bottom: 0px;
Aucune suggestion?
J'ai ajouté la propriété height aux balises body et html.
HTML:
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content">content</div>
</div>
CSS:
html, body
{
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#wrapper
{
height: 100%;
min-height: 100%;
}
#header
{
height: 111px;
}
La meilleure façon de procéder consiste à utiliser les styles de port de vue. Il fait juste le travail et pas d'autres techniques nécessaires.
Code:
div{
height:100vh;
}
<div></div>
Alternativement, vous pouvez simplement utiliser position:absolute
:
#content
{
position:absolute;
top: 111px;
bottom: 0px;
}
Cependant, IE6 n'aime pas les déclarations en haut et en bas. Mais les développeurs Web n'aiment pas IE6.
div{
height:100vh;
background-color:gray;
}
<div></div>
Maintenant, avec CSS3, vous pouvez essayer d'utiliser calc ()
.main{
height: calc(100% - 111px);
}
jetez un oeil à cette réponse: Largeur Div 100% moins montant fixe de pixels
div{
height:100vh;
}
<div></div>
Je suppose que vous essayez d'obtenir pied collant
Des marges négatives bien sûr!
<div id="header">
<h1>Header Text</h1>
</div>
<div id="wrapper">
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
ullamcorper velit aliquam dolor dapibus interdum sed in dolor. Phasellus
vel quam et quam congue sodales.
</div>
</div>
#header
{
height: 111px;
margin-top: 0px;
}
#wrapper
{
margin-bottom: 0px;
margin-top: -111px;
height: 100%;
position:relative;
z-index:-1;
}
#content
{
margin-top: 111px;
padding: 0.5em;
}
100vh fonctionne pour moi, mais au début, javascript était utilisé (jQuery, mais vous pouvez l’adapter) pour résoudre un problème similaire.
HTML
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content">content</div>
</div>
</body>
js/jQuery
var innerWindowHeight = $(window).height();
var headerHeight = $("#header").height();
var contentHeight = innerWindowHeight - headerHeight;
$(".content").height(contentHeight + "px");
Alternativement, vous pouvez simplement utiliser 111px si vous ne voulez pas calculer headerHeight.
En outre, vous souhaiterez peut-être mettre cela dans un événement de redimensionnement de la fenêtre pour réexécuter le script si la hauteur de la fenêtre augmente, par exemple.