CSS : Réglage hauteur/largeur en pourcentage moins pixels

Question

J'ai vu cette question posée dans un couple d'autres contextes, mais j'ai pensé qu'il serait utile de se poser à nouveau pour mon cas particulier. Je suis en train de créer un peu de ré-utilisable classes CSS 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 div conteneur que je ne veux pas définir la hauteur de (parce qu'il va varier selon l'endroit sur le site où il est), et à l'intérieur c'est un en-tête de div, et ensuite une liste non ordonnée d'éléments, tous avec CSS appliquée à eux. Il ressemble beaucoup à ceci:

Je veux la liste non ordonnée de prendre le reste de la salle dans le div conteneur, sachant que l'en-tête div est 18px de haut. Je ne sais pas comment spécifier la liste de hauteur comme "le résultat de 100% à moins 18px". Quelqu'un aurait-il des conseils dans cette situation?

Merci beaucoup.

Answer 1

Je me rends compte que c’est un vieux post, mais étant donné qu’il n’a pas été suggéré, il est à noter que si vous écrivez pour les navigateurs compatibles CSS3, vous pouvez utiliser `` :

Il vaut la peine de noter que pas tous les navigateurs prend en charge la fonction de calc() standard CSS3, afin de mettre en œuvre les versions de navigateur spécifiques de la fonction peut être exigée comme suit :

Answer 2

Pour un peu de façon différente, vous pouvez utiliser quelque chose comme ça sur la liste :

Cela fonctionne tant que le conteneur parent a``

Answer 3

Pour ce faire j’ai utiliser Jquery

puis je lie la fenêtre redimensionner à recalculer chaque fois que la fenêtre du navigateur est redimensionnée (si la taille du conteneur changé avec fenêtre redimensionner)

Answer 4

Ne pas définir la hauteur en pourcentage, il suffit de régler le et , comme ceci :

Answer 5

Supposant que la hauteur de l’en-tête 17px

Liste des css :

En-tête css :