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

Question

I just want to make a div below some fixed texts, and I want the div to fill exactly the height of the page, and I want it to work cross-browser... It is hard to believe how much work such a nature task requires.

I tried this code, which adjusts the height by jQuery. It works well in Chrome, but it does not work perfectly in Chrome: if we scroll down, we could see it does not automatically restore to the initial 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 a perfect solution (CSS or jQuery) cross-browser?

By perfect cross-browser solution, do you mean one that includes old/archaic IE versions (6-9) as well? — , Aug 11 '17 at 21:37
No... I will be satisfied of a solution that works with modern Chrome, IE and Safari. — SoftTimur, Aug 11 '17 at 21:38
It really sounds like you're looking for a "sticky footer" kinda thing, there should be tons of examples of pure CSS footers that can be extended up to the content any which way you choose — adeneo, Aug 11 '17 at 21:46
@adeneo In Safari, when you scroll down, you will see the height is almost infinite... — SoftTimur, Aug 11 '17 at 21:46
CSS could do this without flex https://stackoverflow.com/questions/45577564/how-to-get-top-div-to-fill-remaining-height-after-bottom-div-rendered-without/45577776 so it is compatible also with old IE8 — G-Cyrillus, Aug 11 '17 at 22:06
Whether or not you accept the given answers, here's one with your original HTML and CSS, with only minor JS modifications (added window load resize scroll listener, and hid the div before adjusting size and showed it after) and one new META tag (to force IE11 to not use compatibility view - just in case); though I can't test in new Safari on Windows... apparently Apple no longer provides new Windows Safari installers. https://jsbin.com/rehiyugupu/edit?html,output — , Aug 11 '17 at 22:24
@mark.hch This jsbin works well in Chrome. In Safari, it is better than my jsbin, after scrolling down, it does restore to the initial, but there are some very obvious flashing... — SoftTimur, Aug 11 '17 at 22:31
@SoftTimur How about now? I removed the hide() and show() calls, and used the window's height instead of the document height. I also set it to auto height if the window is smaller than the .top element. https://jsbin.com/deyivibina/edit?html,output — , Aug 11 '17 at 22:56
Now, I come to the initial problem for Safari: after scrolling down, it does restore to the initial position. @mark.hch — SoftTimur, Aug 11 '17 at 22:59

score 0 · Answer 1 · 2017-08-11T21:48:01.163

0

If you want to make that div under that text you need to do some css there you can find many tutorials because it is in basics:

Use position relative to parent div and position absolute to div that u want to move under text.

If you want to use full height you don't need jquery use VH - viewport height as height: 100vh; to have full height of any devices.

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

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

edited Aug 11 '17 at 21:48

answered Aug 11 '17 at 21:45

Please provide a working example, I have tried `vh`, it is even less good than jQuery cross-browser. – SoftTimur Aug 11 '17 at 21:47
Then I don't understand your questions: I just want to make a div under some fixed texts- under or below? And I want the div to fill exactly the height of the page- which div, myme or rb? For myme you are subtracting height of top div from full height. So I don't understand which div you want to make full height? – Aug 11 '17 at 21:56
Sorry, I meant "below", I want "myME" fill the rest of the page. – SoftTimur Aug 11 '17 at 21:58
Then @MohamedAdel solution works well for me in Safari (that I just dowwnloaded) works same as in others... – Aug 11 '17 at 22:11
Where is Mohamed Adel's solution? – SoftTimur Aug 11 '17 at 22:14

score 0 · Accepted Answer · answered Aug 11 '17 at 22:17

0

for older and newer browsers , the display:table properties could match your requirement.

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>

the .buffer div is to make sure that each of your rows are made of a single cell to avoid layout to be split also in columns.

answered Aug 11 '17 at 22:17

G-Cyrillus

101,410
14
105
129

Thank you very much. Your solution works for me in Chrome and Safari at least. Actually I want to embed a Monaco Editor inside `myME`, but the height does not work well with your solution ([JSBin](https://jsbin.com/ceriyorota/2/edit?html,output)), do you have any idea? Do you want me to post another question for this? – SoftTimur Aug 11 '17 at 22:40
1

would this be a solution for the moment ? https://jsbin.com/tevizuviwe/1/edit?html,css,output looks like your editor gets bigger than the area where it is suppose to stand. or https://codepen.io/gc-nomade/pen/ZJJBym but your editor seems buggy (scrollbars unreachable) – G-Cyrillus Aug 11 '17 at 23:05
@SoftTimur ?? maybe you should test in a stand alone document online to be sure that's all fine (too many frames in the way i guess) – G-Cyrillus Aug 11 '17 at 23:12
I always test it in a standalone page on my side... it is very odd that the codepen works well in Chrome, but does not show the editor at all. – SoftTimur Aug 11 '17 at 23:13
and the jsbin solution works fine in Safari, but not very well in Chrome. I think the way is to figure out why the codepen solution does not show the editor in Safari. – SoftTimur Aug 11 '17 at 23:16
might be some security or filtering of codepen. open both jsbin and codepen, so scripts should be in the browser cache. (it happens sometines with image too with codepen ...) – G-Cyrillus Aug 11 '17 at 23:16
I copied your codepen to a standalone html file... the file works in Chrome, but does not show the editor in Safari, though I can inspect the editor element. I will put a link here. – SoftTimur Aug 11 '17 at 23:20
You should update your question including the link for Safari testing to be seen. I do not have Safari where i stand :( – G-Cyrillus Aug 11 '17 at 23:22
Here is the [file](https://www.matrixlead.com/test/ME.html), I will post another question, and put the link here. – SoftTimur Aug 11 '17 at 23:28
https://stackoverflow.com/questions/45625660/let-monaco-editor-fill-the-rest-of-the-page-cross-browser – SoftTimur Aug 12 '17 at 21:10

score 0 · Answer 3 · answered Aug 11 '17 at 23:16

If top div is a fixed size ( just change size in both heights in top div and calc function ) you can try this :

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>

I hope this helps you

flex only requires :flex:1; on the child suppose to fill space remaing. height is not needed. the easiest solution for nowdays browsers. — G-Cyrillus, Aug 11 '17 at 23:25

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

3 Answers3

Linked