Geek Answers Handbook

Make the div fill the rest of the page (cross browser)

I just want to make the div below some fixed texts, and I want the div to fill exactly the height of the page, and I want it to work in a cross browser ... It's hard to believe how much work this environmental task requires.

I tried this code that adjusts the height using jQuery. It works fine in Chrome, but it doesn't work fine in Chrome: if we scroll down, we can see that it does not automatically restore to its original position.

<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery.min.js"></script> <style> body { margin: 0 } .rb .myME { background: grey } </style> </head> <body> <div class="rb"> <div class="top">1<br/>2<br/>3<br/>4<br/></div> <div class="myME">abc</div> </div> <script> $(".myME").css({ height: (($(document).height()) - $(".top").height()) + 'px' }) </script> </body> </html>

Does anyone have the perfect solution (CSS or jQuery) cross browser?

0
javascript jquery css cross-browser height
source share
3 answers

for older and newer browsers, the display:table properties may suit your requirements.

 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%; } 
 <div class="rb"> <div class="top"> <div class="buffer"> 1<br/>2<br/>3<br/>4<br/> </div> </div> <div class="myME"> <div class="buffer"> abc </div> </div> </div>

.buffer div should make sure that each of your rows is made from one cell, to avoid layout layout also in columns.

+1
source share

If you want to make this div under this text, you need to make css there, you can find many tutorials, because it is mainly:

Use position relative for the parent div and position absolute to div what you want to move through the text.

If you want to use full height, you do not need to use jQuery VH - viewport height as height: 100vh; for the full height of any devices.

I'm not sure VH works everywhere, but it does for me in chrome, fox, edge

At W3schools, it works here: https://www.w3schools.com/cssref/css_units.asp

0
source share

If the top div is a fixed size (just resize at both heights in the top div and calc function), you can try the following:

 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%; } 
 <!DOCTYPE html> <html> <head> </head> <body> <div class="rb"> <div class="top">1<br/>2<br/>3<br/>4<br/></div> <div class="myME">abc</div> </div> </body> </html>

Hope this helps you.

0
source share

More articles:


All Articles