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

Question

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

Demandé el 28 de Juillet, 2009: Quand la question a-t-elle été
101555 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Cette question a déjà des réponses:

CSS : Réglage hauteur/largeur en pourcentage moins pixels (5 réponses )

J'ai une div wrapper qui contient 2 divs l'un à côté de l'autre. Au-dessus de ce conteneur, j'ai une division qui contient mon en-tête. La division d'encadrement doit être égale à 100 % moins la hauteur de l'en-tête. L'en-tête fait environ 60 px. Cette hauteur est fixe. Ma question est donc la suivante : comment puis-je définir la hauteur de ma division d'habillage pour qu'elle soit de 100 % moins les 60 px ?

<div id="header"></div>
<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>

Demandé el 28 de Juillet, 2009 par Martijn

Answer 1

5 Réponses

Answer 2

308voto

libjup Points 995

En CSS3, vous pourriez utiliser

height: calc(100% - 60px);

Répondu el 5 de Février, 2013 par libjup (995 Points )

27 votes

Assurez-vous que vous avez un espace avant et après le signe "-". Firefox doit avoir un espace avant le signe "-".

Commenté el 22 de Avril, 2013 par Codler

Answer 3

80voto

Alsciende Points 11508

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

Répondu el 28 de Juillet, 2009 par Alsciende (11508 Points )

0 votes

Cela fonctionne sous FF, mais je n'arrive pas à le faire fonctionner sous IE7. I only see 'Header' Code:<div id="header">Header</div> <div id="wrapper"> <div id="left">Left</div> <div id="right">Right</div> </div>

Commenté el 28 de Juillet, 2009 par Martijn

0 votes

Avez-vous déclenché le mode conforme aux normes ? Je vais ajouter une page d'exemple dans ma réponse.

Commenté el 28 de Juillet, 2009 par Alsciende

1 votes

De plus, si vous devez positionner ces divs au milieu de la page ou ailleurs, il suffit de les envelopper dans un div conteneur et de définir position: relative sur le conteneur. Placez ensuite le conteneur où vous le souhaitez sur la page.

Commenté el 30 de Juillet, 2011 par Mrchief

Afficher 2 autres commentaires

Answer 4

47voto

Aaron Digulla Points 143830

Si vous devez prendre en charge IE6, utilisez JavaScript pour gérer la taille du div wrapper (définissez la position de l'élément en pixels après avoir lu 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 il faut compter 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;

Répondu el 28 de Juillet, 2009 par Aaron Digulla (143830 Points )

0 votes

Le site n'est compatible qu'avec IE 7. Lorsque j'utilise height : 100% et top : 60px ; j'ai toujours une barre de défilement. Je peux faire défiler le site de 60px vers le bas.

Commenté el 28 de Juillet, 2009 par Martijn

4 votes

Ne spécifiez pas de hauteur, utilisez le haut et le bas et laissez le navigateur calculer la hauteur.

Commenté el 28 de Juillet, 2009 par Aaron Digulla

0 votes

Mais je veux que ma page ait une hauteur maximale de 100% moins 60px ; Si le contenu est plus grand que cela, je veux des barres de défilement dans la div en utilisant overflow : scroll ;

Commenté el 28 de Juillet, 2009 par Martijn

Afficher 7 autres commentaires

Answer 5

6voto

Jayaveer Points 71

Très bien... maintenant j'ai arrêté d'utiliser le % 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 cela fonctionne bien. Y a-t-il des inconvénients à utiliser cette méthode ?

Répondu el 10 de Septembre, 2010 par Jayaveer (71 Points )

Answer 6

0voto

Noel Walters Points 1455

Cela ne répond pas exactement à la question posée, mais cela crée le même effet visuel que celui 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>

Répondu el 28 de Juillet, 2009 par Noel Walters (1455 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: