CSS: définition de la largeur / hauteur en pourcentage moins pixels

J'essaie de créer des classes CSS réutilisables pour plus de cohérence et moins d'encombrement sur mon site, et je suis coincé à essayer de normaliser une chose que j'utilise fréquemment.

J'ai un conteneur pour <div>lequel je ne veux pas définir la hauteur (car il variera en fonction de l'endroit où il se trouve sur le site), et à l'intérieur, il y a un en-tête <div>, puis une liste non ordonnée d'éléments, le tout avec CSS appliqué à leur.

Cela ressemble beaucoup à ceci:

Je veux que la liste non ordonnée occupe l'espace restant dans le conteneur <div>, sachant que l'en-tête <div>est 18pxgrand. Je ne sais tout simplement pas comment spécifier la hauteur de la liste comme "le résultat de 100%moins 18px".

J'ai vu cette question posée dans quelques autres contextes sur SO, mais j'ai pensé qu'il valait la peine de se poser à nouveau pour mon cas particulier. Quelqu'un at-il des conseils dans cette situation?

Je me rends compte que c'est un ancien article, mais étant donné qu'il n'a pas été suggéré, il convient de mentionner que si vous écrivez pour des navigateurs compatibles CSS3, vous pouvez utiliser calc:

height: calc(100% - 18px);

Il vaut la peine de noter que tous les navigateurs ne prennent pas actuellement en charge la fonction standard CSS3 calc (), donc l'implémentation des versions spécifiques au navigateur de la fonction peut être requise comme suit:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

Pour un peu d'une approche différente, vous pouvez utiliser quelque chose comme ça sur la liste:

position: absolute;
top: 18px;
bottom: 0px;
width: 100%;

Cela fonctionne tant que le conteneur parent a position: relative;

J'utilise Jquery pour cela

function setSizes() {
   var containerHeight = $("#listContainer").height();
   $("#myList").height(containerHeight - 18);
}

puis je lie le redimensionnement de la fenêtre pour le recalculer chaque fois que la fenêtre du navigateur est redimensionnée (si la taille du conteneur a changé avec le redimensionnement de la fenêtre)

$(window).resize(function() { setSizes(); });

Ne définissez pas la hauteur en pourcentage, définissez simplement le top=0et bottom=0, comme ceci:

#div {
   top: 0; bottom: 0;
   position: absolute;
   width: 100%;
}

Présumer la hauteur de l'en-tête 17px

Liste css:

height: 100%;
padding-top: 17px;

En-tête CSS:

height: 17px;
float: left;
width: 100%;

1. Utilisez des marges négatives sur l'élément sur lequel vous souhaitez réduire les pixels. (élément souhaité)
2. Faire overflow:hidden;sur l'élément contenant
3. Activez overflow:auto;l'élément souhaité.

Ça a marché pour moi!

Essayez le dimensionnement des boîtes. Pour la liste:

height: 100%;
/* Presuming 10px header height */
padding-top: 10px;
/* Firefox */
-moz-box-sizing: border-box;
/* WebKit */
-webkit-box-sizing: border-box;
/* Standard */
box-sizing: border-box;

Pour l'en-tête:

position: absolute;
left: 0;
top: 0;
height: 10px;

Bien sûr, le conteneur parent devrait avoir quelque chose comme:

position: relative;

Une autre façon d'atteindre le même objectif: les boîtes flexibles . Faites du conteneur une boîte flexible de colonne, puis vous avez toute liberté pour autoriser certains éléments à avoir une taille fixe (comportement par défaut) ou à remplir / réduire l'espace du conteneur (avec flex-grow: 1 et flex- rétrécir: 1).

#wrap {        
  display:flex;
  flex-direction:column;
}
.extendOrShrink {
  flex-shrink:1;
  flex-grow:1;
  overflow:auto;
}

Voir https://jsfiddle.net/2Lmodwxk/ (essayez d'agrandir ou de réduire la fenêtre pour remarquer l'effet)

Remarque: vous pouvez également utiliser la propriété de raccourci:

   flex:1 1 auto;

J'ai essayé certaines des autres réponses, et aucune n'a fonctionné comme je le souhaitais. Notre situation était très similaire où nous avions un en-tête de fenêtre et la fenêtre était redimensionnable avec des images dans le corps de la fenêtre. Nous voulions verrouiller le rapport hauteur / largeur du redimensionnement sans avoir besoin d'ajouter des calculs pour tenir compte de la taille fixe de l'en-tête tout en laissant l'image remplir le corps de la fenêtre.

Ci-dessous, j'ai créé un extrait très simple qui montre ce que nous avons fini par faire qui semble bien fonctionner dans notre situation et devrait être compatible avec la plupart des navigateurs.

Sur notre élément de fenêtre, nous avons ajouté une marge de 20 pixels qui contribue au positionnement par rapport aux autres éléments de l'écran, mais ne contribue pas à la "taille" de la fenêtre. L'en-tête de fenêtre est ensuite positionné de manière absolue (ce qui le supprime du flux d'autres éléments, de sorte qu'il ne provoquera pas le déplacement d'autres éléments comme la liste non ordonnée) et son sommet est positionné à -20px, ce qui place l'en-tête à l'intérieur de la marge de la fenêtre. Enfin, notre élément ul est ajouté à la fenêtre, et la hauteur peut être réglée à 100% ce qui la fera remplir le corps de la fenêtre (hors marge).

*,*:before,*:after
{
  box-sizing: border-box;
}

.window
{
  position: relative;
  top: 20px;
  left: 50px;
  margin-top: 20px;
  width: 150px;
  height: 150px;
}

.window-header
{
  position: absolute;
  top: -20px;
  height: 20px;
  border: 2px solid black;
  width: 100%;
}

ul
{
  border: 5px dashed gray;
  height: 100%;
}

<div class="window">
  <div class="window-header">Hey this is a header</div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

Merci, j'ai résolu le mien avec votre aide, en l'ajustant un peu car je veux un div 100% de largeur 100% de hauteur (moins de hauteur d'une barre inférieure) et pas de défilement sur le corps (sans pirater / cacher les barres de défilement).

Pour CSS:

 html{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 body{
  position:relative;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 div.adjusted{
  position:absolute;width:auto;height:auto;left:0px;right:0px;top:0px;bottom:36px;margin:0px;border:0px;padding:0px;
 }
 div.the_bottom_bar{
  width:100%;height:31px;margin:0px;border:0px;padding:0px;
}

Pour HTML:

<body>
<div class="adjusted">
 // My elements that go on dynamic size area
 <div class="the_bottom_bar">
  // My elements that goes on bottom bar (fixed heigh of 31 pixels)
 </div>  
</div>  

Cela a fait l'affaire, oh oui, j'ai mis une valeur un peu plus grande sur div.justée pour le bas que pour la hauteur de la barre inférieure, sinon la barre de défilement verticale apparaît, j'ai ajusté pour être la valeur la plus proche.

Cette différence est parce que l'un des éléments de la zone dynamique ajoute un trou inférieur supplémentaire dont je ne sais pas comment me débarrasser ... c'est un tag vidéo (HTML5), veuillez noter que j'ai mis ce tag vidéo avec ce css ( il n'y a donc aucune raison pour qu'il fasse un trou au fond, mais il le fait):

 video{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

L'objectif: avoir une vidéo qui prend 100% du navigateur (et se redimensionne dynamiquement lorsque le navigateur est redimensionné, mais sans modifier le rapport d'aspect) moins un espace inférieur que j'utilise pour une div avec quelques textes, boutons, etc. (et validateurs w3c & css bien sûr).

EDIT: J'ai trouvé la raison, le tag vidéo est comme du texte, pas un élément de bloc, donc je l'ai corrigé avec ce CSS:

 video{
  display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

Notez la display:block;balise on video.

Je ne sais pas si cela fonctionne dans votre situation particulière, mais j'ai trouvé que le remplissage sur la div intérieure poussera le contenu à l'intérieur d'une div si la div contenant est de taille fixe. Vous devrez soit flotter soit positionner absolument votre élément d'en-tête, mais sinon, je n'ai pas essayé cela pour les divs de taille variable.