web-dev-qa-db-fra.com

CSS Comment définir la hauteur de la division 100% moins nPx

J'ai un div wrapper qui contient 2 divs l'un à côté de l'autre. Au-dessus de ce conteneur, j'ai un div qui contient mon en-tête. Le div de l'emballage doit être égal à 100% moins la hauteur de l'en-tête. L'en-tête est d'environ 60 px. Ceci est corrigé. Ma question est donc la suivante: comment définir la hauteur de mon emballage pour qu'il soit égal à 100% moins le 60 px?

<div id="header"></div>
<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>
cssheight
186
Martijn

Voici un css fonctionnel, testé sous Firefox/IE7/Safari/Chrome/Opera.

* {margin:0px;padding:0px;overflow:hidden}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px;}
div#left {top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
div#right {top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}

"overflow-y" n'est pas approuvé par le w3c, mais tous les principaux navigateurs le supportent. Vos deux divs #left et #right afficheront une barre de défilement verticale si leur contenu est trop élevé.

Pour que cela fonctionne sous IE7, vous devez activer le mode conforme aux normes en ajoutant un DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
        *{margin:0px;padding:0px;overflow:hidden}
        div{position:absolute}
        div#header{top:0px;left:0px;right:0px;height:60px}
        div#wrapper{top:60px;left:0px;right:0px;bottom:0px;}
        div#left{top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
        div#right{top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}
</style>
</head>
<body>
<div id="header"></div>
<div id="wrapper">
  <div id="left"><div style="height:1000px">high content</div></div>
  <div id="right"></div>
</div>
</body>
77
Alsciende

En CSS3, vous pouvez utiliser

height: calc(100% - 60px);
247
libjup

Si vous devez prendre en charge IE6, utilisez JavaScript pour gérer la taille du div de l'emballage (définissez la position de l'élément en pixels après la lecture de la taille de la fenêtre). Si vous ne voulez pas utiliser JavaScript, cela ne peut pas être fait. Il existe des solutions de contournement, mais attendez-vous une semaine ou deux pour que cela fonctionne dans tous les cas et dans tous les navigateurs.

Pour les autres navigateurs modernes, utilisez ce css:

position: absolute;
top: 60px;
bottom: 0px;
47
Aaron Digulla

super ... maintenant j'ai cessé d'utiliser% he he he ... sauf le conteneur principal, comme indiqué ci-dessous:

<div id="divContainer">
    <div id="divHeader">
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">
        </div>
        <div id="divContentRight">
        </div>
    </div>
    <div id="divFooter">
    </div>
</div>

et voici le css:

#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 250px;
    bottom: 0px;
}
#divContentRight {
    position: absolute;
    top: 0px;
    left: 254px;
    right: 0px;
    bottom: 0px;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

j'ai testé cela dans tous les navigateurs connus et fonctionne bien. Y a-t-il des inconvénients à utiliser cette méthode?

6
Jayaveer

Vous pouvez faire quelque chose comme height: calc (100% - nPx); par exemple height: calc (100% - 70px);

3
BeC
div {
    height: 100%;
    height: -webkit-calc(100% - 60px);
    height: -moz-calc(100% - 60px);
    height: calc(100% - 60px);
}

Assurez-vous en utilisant moins

height: ~calc(100% - 60px);

Sinon moins ne va pas le compiler correctement

2
Dadhich Sourav

Cela ne répond pas exactement à la question posée, mais crée le même effet visuel que vous essayez d'obtenir.

<style>

body {
  border:0;
  padding:0;
  margin:0;
  padding-top:60px;
}

#header {
  position:absolute;
  top:0;
  height:60px;
  width:100%;
}

#wrapper {
  height:100%;
  width:100%;
}
</style>
0
Noel Walters

Je n'ai encore rien vu de tel, mais je pensais le publier.

<div class="main">
<header>Header</header>
<div class="content">Content</div>

Puis CSS:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.main {
    height: 100%;
    padding-top: 50px;
    box-sizing: border-box;
}

header {
    height: 50px;
    margin-top: -50px;
    width: 100%;
    background-color: #5078a5;
}

.content {
    height: 100%;
    background-color: #999999;
}

Voici un travail jsfiddle

Note: Je n'ai aucune idée de ce qu'est la compatibilité du navigateur pour cela. Je ne faisais que jouer avec des solutions alternatives et cela semblait bien fonctionner.

0
FreedomMan

Dans cet exemple, vous pouvez identifier différents domaines:

<html>
<style>
#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
    background-color:blue;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    bottom: 0px;
    background-color:red;
}
#divContentCenter {
    position: absolute;
    top: 0px;
    left: 200px;
    bottom: 0px;
    right:200px;
    background-color:yellow;
}
#divContentRight {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width:200px;
    background-color:red;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color:blue;
}
</style>
<body >

<div id="divContainer">
    <div id="divHeader"> top
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">left
        </div>
        <div id="divContentCenter">center
        </div>
        <div id="divContentRight">right
        </div>
    </div>
    <div id="divFooter">bottom
    </div>
</div>

</body>
</html>
0
Renzo Ciot