设置 div 高度并相应地滚动答案

【问题标题】：Set div height and scroll accordingly设置 div 高度并相应地滚动
【发布时间】：2016-09-27 22:40:05
【问题描述】：

与这个问题相关的问题很多。

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

我的页面结构是这样的。

<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' 对我没有帮助。

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

【问题讨论】：

我不清楚你想达到什么目的。你说“相应地滚动”、“相应地调整”和“我正在寻找的目的”，但我在描述中没有看到你想要的最终结果。
@ConnorsFan 我需要的是#summary 高度应相应调整，如果内容溢出则应出现滚动条。

标签： javascript jquery html css height

【解决方案1】：

我建议你使用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>

【讨论】：

我也试过这个解决方案，stackoverflow 有这个解决方案，但不知何故不起作用..我会再试一次并更新
我试过了，没有滚动到div的底部。 Flex到底是做什么的？ @lgson
@Jil 什么不滚动到哪个 div 的底部？ ...您能否制作一个带有标记的屏幕转储图像，您的意思是它应该如何表现？
左对齐。您提供的解决方案效果很好，但是当我在底部添加更多填充时，我可以滚动到底部。如果我删除填充滚动条不可见，文本溢出但滚动条仍然不显示。附上一张图片以显示我所指的内容。 @lgson
header 应该是固定的，该部分没有滚动条。 #summary 文字超过页面高度时应该有滚动条。

【解决方案2】：

我感觉到你的痛苦。 Flexbox 是执行此操作的新方法，并且有一些很好的 polyfill，但是如果您已经致力于 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;
}

【讨论】：

#summary 的内容不应向右溢出。页面设计使得内容应该向下溢出。
#status 不需要滚动条。 #summary 应该从 #status 结束的点开始，并且当文本超过页面高度时需要有一个滚动条。
在这种情况下，它应该可以正常工作，因为它在我的答案底部没有额外的 css。根据您所说的描述：“此 div 高度应相应调整，并在需要时进行水平滚动” ...所以我认为您想要它，所以如果#summary 中的内容大于它可以包含的内容，而不是必须向下滚动要查看所有内容，您需要滚动浏览。我希望这有帮助。如果我不理解这个问题，请进一步详细说明所需的行为应该是什么。
完美运行。正如我所愿。非常感谢 :) :) 帮助了我.. 一个多月以来我一直为此头疼.. 非常感谢 :)
对不起，如果冒犯了你，我接受另一个答案的原因是，1. 更少的代码行。 Flex 完成了这项工作。 2. 他的回答是第一个。不幸的是，stackoverflow 不允许我接受 2 个答案。伙计，你有 286 个学分，我的还不到 50 个，:P .. 真的很长很长的路要走:)

【解决方案3】：

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

【讨论】：