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

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

解决方案不应假设任何固定尺寸元素。

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

在窗格周围有一个固定高度容器，带有下面的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>

尝试此

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>

在一些摆弄后，我找到了一个纯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>

相关内容

最新更新

热门标签：