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

199

J'ai un div wrapper qui contient 2 divs côte à côte. Au-dessus de ce conteneur, j'ai un div qui contient mon en-tête. La div enveloppe doit être de 100% moins la hauteur de l'en-tête. L'en-tête est d'environ 60 px. C'est corrigé. Donc, ma question est: comment puis-je définir la hauteur de mon div enveloppe à 100% moins les 60 px?

<div id="header"></div>
<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>
css height Martijn
la source
16
Je souhaite vraiment que le w3c envisage d'ajouter une valeur moins la propriété constante à la largeur, ils ont oublié d'inclure les bordures dans la largeur, mais ils auraient dû changer la définition la plupart des hacks CSS disparaîtraient si ces deux choses étaient disponibles.
samarjit samanta

Réponses:

79

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 prennent en charge. 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 déclencher 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>
Développer l'extrait

Alsciende
la source
Il fonctionne en FF, mais je ne le fais pas fonctionner sous IE7. Je ne vois que le code "En-tête": <div id = "header"> En-tête </div> <div id = "wrapper"> <div id = "left"> Gauche </div> <div id = "right"> Droite </div> </div>
Martijn
Avez-vous déclenché le mode conforme aux normes? Je vais ajouter un exemple de page dans ma réponse.
Alsciende
1
De plus, si vous devez positionner ces div au milieu de la page ou n'importe où ailleurs, enveloppez-les simplement dans un div de conteneur et définissez-les position: relativesur le conteneur. Placez ensuite le conteneur où vous le souhaitez sur la page.
Mrchief
qu'en est-il de la division intérieure, à l'intérieur de # gauche par exemple si je veux 2 divisions avec des hauteurs respectives de 40% et 60%?
TecHunter
Y a-t-il une raison précise pour laquelle px a été spécifié sur les paramètres de valeur 0?
Cassandra
274

Dans CSS3, vous pouvez utiliser 

height: calc(100% - 60px);
libjup
la source
25
Assurez-vous d'avoir de l'espace avant et après le signe "-". Firefox doit avoir de l'espace avant le signe "-".
Codler
7
parfait. je ne savais pas que CSS3 pouvait le faire.
Tom Beech
Hou la la! exactement ce que je voulais. Merci.
Sandhu
1
C'est fantastique
Mirko
47

Si vous devez prendre en charge IE6, utilisez JavaScript afin de gérer la taille de la div enveloppe (définissez la position de l'élément en pixels après avoir lu la taille de la fenêtre). Si vous ne souhaitez pas utiliser JavaScript, cela ne peut pas être fait. Il existe des solutions de contournement, mais attendez 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;
Aaron Digulla
la source
Le site n'est compatible qu'avec IE 7. Lorsque j'utilise la hauteur: 100% et le haut: 60 px; J'ai toujours une barre de défilement. Je peux faire défiler 60 pixels vers le bas.
Martijn
4
Ne spécifiez pas de hauteur, utilisez le haut et le bas et laissez le navigateur calculer la hauteur.
Aaron Digulla
Mais je veux que ma page ait une hauteur maximale de 100% moins 60 px; Si le contenu est plus grand que cela, je veux des barres de défilement dans la div en utilisant overflow: scroll;
Martijn
4
Pour une barre de défilement, ajoutez un div à l'intérieur du wrapper qui le remplit complètement et faites ce débordement: scroll;
Aaron Digulla
Notez qu'en raison de bogues dans IE7, cela peut toujours échouer. Si vous ne parvenez pas à le faire fonctionner, utilisez JavaScript. Je sais, vous ne l'aimez pas, mais pesez-le contre une semaine de travail aux prises avec des bugs étranges.
Aaron Digulla
6

super ... maintenant j'ai cessé d'utiliser% he he he ... sauf pour 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 très bien. Y a-t-il des inconvénients à utiliser cette méthode?

Jayaveer
la source
4

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

DrB
la source
2 
div {
    height: 100%;
    height: -webkit-calc(100% - 60px);
    height: -moz-calc(100% - 60px);
    height: calc(100% - 60px);
}

Assurez-vous que tout en utilisant moins 

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

Sinon, moins ne va pas le compiler correctement

Dadhich Sourav
la source
0

Cela ne répond pas exactement à la question posée, mais cela 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>
Noel Walters
la source
0

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>
Renzo Ciot
la source
0

Je n'ai encore rien vu de tel posté, mais je pensais l'avoir mis là-bas. 

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

Ensuite 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 jsfiddle fonctionnel

Remarque: je n'ai aucune idée de la compatibilité du navigateur pour cela. Je jouais juste avec des solutions alternatives et cela semblait bien fonctionner.

FreedomMan
la source
-1

Utilisez un div de wrapper externe réglé à 100%, puis votre div de wrapper interne à 100% devrait maintenant être relatif à cela.

Je pensais à coup sûr que cela fonctionnait pour moi, mais apparemment pas:

<html>
<body>
<div id="outerwrapper" style="border : 1px solid red ; height : 100%">
<div id="header" style="border : 1px solid blue ; height : 60px"></div>
<div id="wrapper"  style="border : 1px solid green ; height : 100% ; overflow : scroll ;">
  <div id="left" style="height : 100% ; width : 50% ; overflow : scroll; float : left ; clear : left ;">Some text 

on the left</div>
  <div id="right" style="height : 100% ; width 50% ; overflow : scroll; float : left ;">Some Text on the 

right</div>
</div>
</div>
</body>
</html>
Cade Roux
la source
Peut en donner un exemple. Je ne comprends pas
Martijn
J'ai posté ce à quoi je pensais, mais je ne peux pas le faire fonctionner si tôt / tard. Peut-être que si je dors encore un peu.
Cade Roux
-1

Si vous ne voulez pas utiliser le positionnement absolu et tout ce jazz, voici une solution que j'aime utiliser:

votre html:

<body>    
   <div id="header"></div>
   <div id="wrapper"></div>
</body>

votre css:

body {
     height:100%;
     padding-top:60px;
}
#header {
     margin-top:60px;
     height:60px;
}
#wrapper {
     height:100%;
}
scotsqueakscoot
la source
1
Je ne pense pas que cela fonctionne comme prévu. Le premier #headerdevrait l'être margin-top:-60px;. Deuxièmement, cela height:100%signifie que la hauteur sera de 100% de la hauteur des éléments parents, sans compter les marges, le rembourrage et les bordures. Selon vos paramètres de défilement, cela entraînera l'apparition de barres de défilement ou le recadrage de votre contenu.
Kylos