设置 div 高度并相应地滚动

Question

与此问题相关的问题很多。

我已经尝试了几乎所有可能找到的方法，但仍然没有达到我想要的目的。

我的页面结构是这样的

<div>
   <header id="status">
     // The content within this section changes dynamically
   </header>
   <div id="summary">
     // This div height should adjust accordingly and have a vertical scroll if needed
   </div>
</div>

我目前正在使用以下脚本来执行此操作，但是当 header 中的文本过长时我无法滚动到底部。

<script>
$(document).ready(function () {
    var h = $(window).height();
    var headerHt = $("#status").height();
    summaryHeight = h - headerHt;
    $('#summary').css("height", summaryHeight + 'px'); $('#summary').css({ "overflow-y": "auto", "overflow-x": "hidden" });

$(window).resize(function () {
    var h = $(window).height();
    var headerHt = $("#status").height();
    summaryHeight = h - headerHt;
    $('#summary').css("height", summaryHeight + 'px'); $('#summary').css({ "overflow-y": "auto", "overflow-x": "hidden" });

min-height 和 'max-height' 对我没有帮助。

请帮我解决这个问题，我已经坚持了一个多月了。早些时候我能够通过将高度设置为一个值来实现这一点，但是随着 header 高度的变化，这种方法将不起作用。

Answer 1

使用 vh 单位设置两个 div 的高度。例如设置 header 的高度 30vh 和设置 #summary 的高度 70vh。就是这样。

Answer 2

我建议你使用flexbox

html, body {
  margin: 0;
}
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
#status {
  background: lightgray;
  padding: 20px 10px;
}
#summary {  
  flex: 1;
  overflow: auto;
  padding: 20px 10px 0 10px;
}

<div class="wrapper">
   <header id="status">
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
   </header>
   <div id="summary">
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>

     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
   </div>
</div>

旁注：这就是 IE8/9 用户看到上面 flex 的方式，并且由于他们不到 2%，我认为是很好的回退并保持你的代码干净

html, body {
  margin: 0;
}
.wrapper {
  /*display: flex;*/
  flex-direction: column;
  height: 100vh;
}
#status {
  background: lightgray;
  padding: 20px 10px;
}
#summary {  
  flex: 1;
  overflow: auto;
  padding: 20px 10px 0 10px;
}

<div class="wrapper">
   <header id="status">
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
   </header>
   <div id="summary">
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>

     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
     This div height should adjust accordingly and have a horizontal scroll if needed<br>
   </div>
</div>

Answer 3

我感受到你的痛苦。 Flexbox 是执行此操作的新方法，并且有一些很好的 polyfills，但如果你已经致力于 jquery 那么我已经创建了一个 JSfiddle 快速抓取我认为你正在尝试实现的目标：

https://jsfiddle.net/c0un7z3r0/t9dde970/

Jquery 很好，它只需要 css 来定位元素，以便它们按预期运行。

#container{
  position:absolute;
  top;0;
  left:0;
  right:0;
  height:100vh;
  padding:0;
  margin:0;
  background:white;
  display:inline-block;
  vertical-align:top;
}
#status{
  position:absolute;
  top:0;
  left:0;
  right:0;
  padding:0;
  margin:0;
  background:red;
}
#summary{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  display:inline-block;
  padding:0;
  margin:0;
  background:blue;
}

同样值得指出的是，要让#summary 的子元素溢出到屏幕右侧（而不是向下）需要您为元素设置一些规则，以便它们在点击时不会换行屏幕右边缘，类似于：

#summary{
    overflow-x:auto;
    overflow-y:hidden;
}
#summary > #summary-content{
    display:inline-block;
    white-space:nowrap;
}

设置 div 高度并相应地滚动

Set div height and scroll accordingly

html

javascript

css

jquery

height