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和＆＃39; max-height＆＃39;没帮我

请帮助我，我已经坚持了一个多月。之前我通过将高度设置为一个值来实现这一点，但是当标题高度发生变化时，这种方法将无效。

Answer 1

我建议您使用flexbox

＆＃13;

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;
}

＆＃13;

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

＆＃13;

附注：这是IE8 / 9用户看到上述flex的方式，因为他们不到2％，我觉得这是一个很好的后备并保留你的代码清洁

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 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;
}

Answer 3

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

设置div高度并相应滚动

3 个答案: