Question

我已经在网上搜索过这个但是我找不到真正适合我甚至工作的人。我发现的答案非常陈旧和/或不是我正在寻找的100％所以我希望有人能帮助我。

我在我的应用程序中使用bootstrap 4，所以如果可以使用bootstrap完成，那么也可以使用纯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>

这是因为bootstrap 4，但现在我也希望div高度延伸到屏幕的底部，如果div的内容比屏幕高度长，那么它应该滚动（在div内）。 / p>

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

Answer 1

由于您使用的是bootsrap 4，因此已经涉及flex。

如果想要让行增长到视口的100％高度，然后在子项中显示一个将超过该值的滚动条，则需要创建一个涉及max-height和overflow的自定义类： / p>

自定义类示例

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

Answer 2

您可以将列设置为'height: 100%'或'height: 100vh'并设置'overflow: scroll;'。

    <!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style>
        html, body {
            height: 100%;
            margin:0;
        }
        .row {
            width: 100%;
        }
        .col {
            display: inline-block;
            box-sizing: border-box;
            width: 25%;
            margin: 0;
            height: 100%;
            overflow: auto;
            vertical-align: top;
        }
    </style>
</head>
<body>
<div class="row">
    <div class="col">
        <h1>Item 1</h1>
    </div><div class="col">
        <h1>Item 2</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div><div class="col">
        <h1>Item 2</h1>
    </div><div class="col">
        <h1>Item 2</h1>
    </div>
</div>
</body>
</html>

Answer 3

您可能希望在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');

}

});

`

跳吧帮助先生。

Answer 4

您需要将元素的int** foo() { matxp = malloc(4 * sizeof(int*)); return matxp; // this will return NULL if malloc failed } int main() { int** matx = foo(); .... // do work, cleanup return 0; }设置为height。如果父级不是屏幕的100％，那么您也需要设置父级高度。如果您的HTML结构看起来像这样......

100%

...然后您需要将所有这些<html> <body> <div class="row"> <div class="col"></div> </div> </body> </html>设置为height：

100%

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

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

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

4 个答案: