CSS div 高度填充剩余空间，如果达到屏幕的最大高度，则滚动

我在网上到处搜索过这个，但我找不到真正适合我甚至工作的人。我找到的答案非常古老和/或不是我正在寻找的 100%，所以我希望有人可以帮助我解决这个问题。

我在我的应用程序中使用引导程序 4，所以如果它可以用引导完成，那么是的，但纯 css 也可以。

我尝试做的是并排拥有 4 个div

例：

<div class="row">
    <div class="col">
        <h1>Item 1</h1>
    </div>
    <div class="col">
        <h1>Item 2</h1>
    </div>
    <div class="col">
        <h1>Item 2</h1>
    </div>
    <div class="col">
        <h1>Item 2</h1>
    </div>
</div>

这是有效的，因为引导程序 4，但现在我也希望div 高度将延伸到屏幕底部，如果该div 的内容比屏幕高度长，那么它应该滚动(在div 内(。

我正在考虑弹性盒，但我无法让它工作。

由于您使用 bootsrap 4 ，flex 已经参与其中。

如果想法是让行增长到视口的 100% 高度，然后在子项中显示一个滚动条，该滚动条将增长到超过该值，则需要创建一个涉及最大高度和溢出的自定义类：

自定义类示例

<div class="row h100-scroll  ">

用于开始的选择器和规则

.h100-scroll .col {/* to scroll col individually*/
  max-height: 100vh;
  overflow: auto;
}

或

.h100-scroll  {/* to scroll the row itself */
  max-height: 100vh;
  overflow: auto;
}

下面的演示，运行代码段并将文本悬停在第一个 col 上

.h100-scroll .col {
  max-height: 100vh;
  overflow: auto;
}
.col br {display:none;}
p:hover br {display:block;}
body {
  margin: 0 1em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap-grid.css" rel="stylesheet" />
<div class="row h100-scroll  ">
  <div class="col">
    <h1>Item 1</h1>
    <p>hover me show the br and add a scrollbar<br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . 
  </div>
  <div class="col">
    <h1>Item 2</h1>
  </div>
  <div class="col">
    <h1>Item 2</h1>
  </div>
  <div class="col">
    <h1>Item 2</h1>
  </div>
</div>

你可能

想在jQuery中执行此操作。解释：

如果div 的高度长于文档的高度，请在div 中显示滚动

法典：

$(document).ready(fuction(){
var docHeight = $(document).height();
var divHeight = $('.the-four-divs').height();
If(divHeight > docHeight){
$('.the-four-divs').css('overflow-x', 'scroll');
}
});

跳它帮助先生。

您需要将

元素的height设置为 100% 。如果父级不是屏幕的 100%，则还需要设置父级高度。如果您的 HTML 结构看起来像这样...

<html>
<body>
  <div class="row">
      <div class="col"></div>
  </div>
</body>
</html>

。然后，您需要将所有这些height设置为100%：

html, body, div.row, div.col {
    height:100%;
}

要创建滚动条，您可以将溢出设置为滚动：

.col {
    overflow:scroll;
}

相关内容

最新更新

热门标签：