web-dev-qa-db-fra.com

CSS: Définition de la hauteur de la div à 100% - Pixels

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?

csshtmlheight
20
moonblade

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;
}
22
ranonE

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>

21
Blaise M.

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.

6
Eric

div{
  height:100vh;
  background-color:gray;
}
<div></div>

5
Mohit Sharma

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

4
RaphKomjat

div{
  height:100vh;
}
<div></div>

3
Mohammed K. Abushawish

Je suppose que vous essayez d'obtenir pied collant

1
n1313

Des marges négatives bien sûr!

HTML

<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>

CSS

#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;
}
0
Eric

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.

0
Chiwda