Disons que j'ai 2 Divs.Comment faire un DIV sans fin après une div fixe de hauteur?
J'ai essayé tout ce que je sais: Quand je le mets à 100%, il occupe tout le site, donc 100px de trop. Quand je l'essaye sans définir de hauteur, je reçois seulement autant que j'écris.
J'utiliserais probablement du Javascript pour résoudre ce problème. C'est probablement le seul moyen de résoudre ce problème, compte tenu des nombreuses incohérences entre IE et le reste de la communauté des navigateurs. Utilisez un framework tel que JQuery pour définir automatiquement la hauteur du second div, de cette façon, vous pouvez être sûr que le même effet sera cohérent dans tous les navigateurs car JQuery est compatible avec tous les navigateurs.
Je ne pense pas que ce soit possible en CSS pur, car vous ne pouvez pas faire 100% - 100px. Vous pouvez utiliser une table avec hauteur 100% et deux lignes. Alors la première rangée est 100px et la deuxième prend le reste de la taille.
<table style="height:100%;">
<tr>
<td style="height:100px;">instead of div 1, is 100px</td>
</tr>
<tr>
<td>instead of div 2, takes the rest of the height</td>
</tr>
</table>
Faire usage de position: absolute, il y a un truc lorsque vous spécifiez top et bottom en même temps, stretching fondamentalement votre div:
<!DOCTYPE html>
<html>
<head>
<style>
body { height: 100%; margin: 0; }
#felso { height: 100px; }
#also { position: absolute; top: 102px; bottom: 0; left: 0; right: 0; }
</style>
</head>
<body>
<div id="felso"></div>
<div id="also"></div>
</body>
</html>
ruser en fonction de vos besoins spécifiques. J'ai écrit 102px pour top en raison des frontières, qui ajoutent 1px * 2 à la hauteur de #felso.
# n'occupe pas non plus le reste de la fenêtre. div 2 doit être 100% élevé moins la hauteur de div 1. – Bazzz
Il s'étend en réalité à la taille de la fenêtre en raison de donner le haut et le bas en même temps. Quel navigateur avez-vous essayé? Pour moi cela fonctionne dans IE8, FF, Chrome. – kapa
D'accord, c'est le cas. Mon problème était avec le doctype que je n'ai pas copié et forcé le navigateur en mode quirks (IE8). Quoi qu'il en soit, votre solution semble la plus élégante (mieux que la table au moins). Le point drôle est que FF en mode bizarreries le fait correctement, si seulement j'ai essayé cela. :) – Bazzz
Je déteste les tables ... tables sont tellement vieux! Je sais que cela fonctionne avec des tables, mais mon design complet (et ce n'est pas facile) est basé sur divs ... – Kovu
Haha Je suis d'accord que les tables ne sont pas idéales, mais d'un point de vue maintenabilité: quand vous pouvez choisir entre un table simple ou un div imbriqué complexe avec css impair et javascript (ça ne marche pas juste hors de la boîte), que choisiriez-vous? Tout le monde comprend une simple table archaïque. :) – Bazzz
Avec des marges négatives, cela pourrait être possible. –