使 div 填充页面的其余部分（跨浏览器）

Question

我只是想在一些固定的文本下面做一个div，我希望div正好填满页面的高度，我希望它能跨浏览器工作.. . 很难相信这样一项自然任务需要多少工作。

我尝试了 this code，它通过 jQuery 调整了高度。它在 Chrome 中运行良好，但在 Chrome 中运行不佳：如果我们向下滚动，我们可以看到它不会自动恢复到初始位置。

<!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>

有没有人有完美的解决方案（CSS或jQuery）跨浏览器？

Answer 1

如果你想div在那个文本下，你需要做一些css在那里你可以找到很多教程，因为它是基础知识：

使用 position relative 作为 div 的父级，使用 position absolute 作为 div 的父级，你想在文本下移动。

如果您想使用全高，则不需要 jquery 使用 VH - viewport 高度作为 height: 100vh; 以获得任何设备的全高。

我不确定 VH 是否适用于任何地方，但它适用于 chrome、fox、edge

W3schools 在这里工作：https://www.w3schools.com/cssref/css_units.asp

Answer 2

对于旧版和新版浏览器，display:table 属性可以满足您的要求。

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 是为了确保您的每一行都由一个单元格组成，以避免布局也被分成列。

Answer 3

如果 top div 是固定大小（只需更改 top div 和 calc 函数中两个高度的大小），您可以试试这个：

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>

希望对你有帮助

使 div 填充页面的其余部分（跨浏览器）

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

javascript

css

jquery

height

cross-browser