498 votes

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

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:

Widget

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.

930voto

Levi Botelho Points 10390
<p>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 <code></code> :<pre><code></code></pre><p>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 :</p><pre><code></code></pre></p>

71voto

Nicolas Galler Points 395
<p>Pour un peu de façon différente, vous pouvez utiliser quelque chose comme ça sur la liste :<pre><code></code></pre><p>Cela fonctionne tant que le conteneur parent a<code></code></p></p>

26voto

puffpio Points 1398
<p>Pour ce faire j’ai utiliser Jquery<pre><code></code></pre><p>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)</p><pre><code></code></pre></p>

16voto

kaleazy Points 1129
<p>Ne pas définir la hauteur en pourcentage, il suffit de régler le <code></code> et <code></code> , comme ceci :<pre><code></code></pre></p>

8voto

ghoppe Points 10004
<p>Supposant que la hauteur de l’en-tête 17px<p>Liste des css :</p><pre><code></code></pre><p>En-tête css :</p><pre><code></code></pre></p>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X