Question

我希望能够在布局的其余空间中独立滚动pane1和pane2的内容，如下所示。因此header将始终可见，并且content应该占据剩余空间。重要的是pane1和pane2可以独立滚动，这意味着例如我可以滚动pane1到底部，而pane2的顶部仍然可见。

解决方案不应假定任何固定大小的元素。

<html>
  <body>
    <div>
      <div>Header</div>
      <div id='content'>
        <div id='pane1' style=" display: inline-block; vertical-align: top; height:3000px; background: red">
          content 1 A<br>
          content 1 B<br>
          content 1 C<br>
        </div>
        <div id='pane2' style=" display: inline-block; vertical-align: top; height:2000px; background: blue">
          content 2 A<br>
          content 2 B<br>
          content 2 C<br>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

在窗格周围有一个固定高度的容器，如下所示为overflow-y: auto;。我知道您已经提到过您不需要固定大小，但是如果您希望窗格可滚动，则必须以某种方式告诉浏览器窗格的高度。将整个内容包装在另一个div中，而不是固定.pane-container的高度也可以。并且.pane-container的高度可以是任何值；百分比，绝对值等。

.pane-container {
  display: inline-block;
  height: 300px;
  overflow-y: auto;
}

<html>
  <body>
    <div>
      <div>Header</div>
      <div id='content'>
        <div class="pane-container">
          <div id='pane1' style=" display: inline-block; vertical-align: top; height:3000px; background: red">
            content 1 A<br>
            content 1 B<br>
            content 1 C<br>
          </div>
        </div>
        <div class="pane-container">
          <div id='pane2' style=" display: inline-block; vertical-align: top; height:2000px; background: blue">
            content 2 A<br>
            content 2 B<br>
            content 2 C<br>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 2

尝试

var header = jQuery(".header").innerHeight();
jQuery(document).ready(function(){
  var abc = "calc(100% - " +header+ "px)";
jQuery(".content").css("height", abc);
})

    body,html {
      height: 100%;
    }
    body {
    margin:0;
    }
    *{
    box-sizing:border-box;
    }
    .wrapper {
      height: 100%;
    }
    .content {
    height:100%;
    display:flex;
    align-items:flex-start;
    }
    div[class*="pane"] {
    height:100%;
    overflow-y:auto;
    }
    .pane1 div {
    height: 2000px;
    }
    .pane2 div {
    height: 1000px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
      <body>
        <div class="wrapper">
          <div class="header">Header</div>
          <div class="content">
            <div class='pane1' style="background-color: blue;">
              <div>
              content 1 A<br>
              content 1 B<br>
              content 1 C<br>
              </div>
            </div>
            <div class="pane2" style="background-color: brown;">
             <div>
              content 2 A<br>
              content 2 B<br>
              content 2 C<br>
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>

Answer 3

经过一番摆弄之后，我发现了一个纯CSS的解决方案：

<html>
  <body>
    <div style=" display: flex; flex-direction: column; height: 100%; ">
      <div>Header</div>
      <div id='container' style="flex-grow: 1; overflow: hidden; position: relative; ">
        <div id='content' style="position: absolute;top: 0;bottom: 0;">
          <div id='pane1' style="display: inline-block;vertical-align: top;height: 100%;background: red;overflow: scroll;">
          </div>
          <div id='pane2'  style="display: inline-block;vertical-align: top;height: 100%;background: blue;overflow: scroll;">
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

剩余空间中内容的独立滚动

3 个答案: