Faire un div remplir le rest de la page (multi-navigateur)

Je veux juste faire une div en dessous de certains textes fixes, et je veux que la div remplisse exactement la hauteur de la page, et je veux que cela fonctionne sur plusieurs navigateurs … Il est difficile de croire à quel point une telle tâche de la nature est lourde a besoin.

J’ai essayé ce code , qui ajuste la hauteur par jQuery. Cela fonctionne bien dans Chrome, mais pas parfaitement dans Chrome: si nous faisons défiler l’écran vers le bas, nous pourrions voir qu’il ne revient pas automatiquement à la position initiale.

     body { margin: 0 } .rb .myME { background: grey }     1
2
3
4
 abc
 
  $(".myME").css({ height: (($(document).height()) - $(".top").height()) + 'px' })

Quelqu’un at-il une solution parfaite (CSS ou jQuery) multi-navigateur?

pour les navigateurs plus anciens et plus récents, les propriétés display:table pourraient correspondre à vos besoins.

 html, body, .rb { margin: 0; height: 100%; } .rb { display: table; width: 100%; border-collapse: collapse; } .top, .myME { display: table-row; } .buffer { display: table-cell; } .top .buffer { background: lightblue; } .myME .buffer { background: tomato; height:100%; }

Si vous voulez faire cette div en-dessous de ce texte, vous devez faire un peu de CSS ici, vous pouvez trouver beaucoup de tutoriels parce que c’est dans les bases:

Utilisez position relative à div parent et position absolute pour div que vous voulez déplacer sous le texte.

Si vous voulez utiliser toute la hauteur, vous n’avez pas besoin de jQuery, utilisez VH - viewport hauteur de la VH - viewport height: 100vh; en height: 100vh; d’avoir toute la hauteur de tous les appareils.

Je ne suis pas sûr que VH fonctionne partout, mais il le fait pour moi en chrome, renard, bord

Par W3schools cela fonctionne ici: https://www.w3schools.com/cssref/css_units.asp

Si top div est une taille fixe (il suffit de changer la taille dans les deux hauteurs des fonctions top div et calc), vous pouvez essayer ceci:

 body { margin: 0 } .rb { width: 100%; height: 100%; display: flex; flex-direction: column; } .top { width: 100%; height: 100px; } .myME { width: 100%; height: calc( 100% - 100px); background: grey; } html, body { height: 100%; }