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

问题

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?

回答1:

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.

回答2:

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

回答3:

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

来源：https://stackoverflow.com/questions/45644110/make-a-div-fill-the-rest-of-the-page-cross-browser

标签

javascript

jquery

css

cross-browser

height