使元素使用剩余高度，并在必要时使用引导程序4.1.3滚动

时间：2018-12-25 19:16:56

标签： css3 flexbox bootstrap-4

我正在尝试创建一个div，其中的片段中为＃div6，其中包含未知数量的卡片div。该div应该使用所有剩余的高度，并在必要时滚动。该div是整个页面布局的一部分，页面应仅使用窗口空间。

我正在尝试以下代码。它在chrome中完美运行。但是它在Firefox和Edge中不起作用，没有显示滚动条。我想最好只使用bootstrap 4.1.3类和最少的额外CSS。有什么帮助在Firefox和Edge中使之工作吗？

您需要在整个页面上运行该代码段，然后在Firefox和Edge上使用chrome和chrome进行尝试，以查看差异。

html, body {
      height: 100%;
    }

    .overflow-auto {
      overflow: auto;
    }

    .card-main {
      height: 100%;
      overflow-y: hidden;
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container-fluid h-100">
    <div class="card card-main">
        <h5 class="card-header text-center bg-primary text-white">Agenda</h5>
        <div class="card-body h-100 d-flex flex-column">
            <div class="form-group row bg-success flex-shrink-0" id="div1">Some content here</div>
            <div class="form-group row mt-1 d-flex flex-fill flex-grow-1">
                `<div class="col-auto bg-danger d-flex flex-column" id="div2">
                    <table class="bg-secondary" style="border: solid grey 1px;">
                        <tr>
                            <td>r1c1</td>
                            <td>r1c2</td>
                        </tr>
                        <tr>
                            <td>r2c1</td>
                            <td>r2c2</td>
                        </tr>
                    </table>
                </div>
                <div class="col d-flex flex-column">
                    <div class="form-group row flex-shrink-0">
                        <div class="col-6" id="div3">Date text</div>
                        <div class="col-3" id="div4">Today</div>
                        <div class="col-3" id="div5">Other icon</div>
                    </div>
                    <div class="form-group row d-flex flex-fill flex-grow-1 overflow-auto">
                        <div class="col-12 overflow-auto" id="div6">
                            <div class="card"><div class="card-body">Card0 content</div></div>
                            <div class="card"><div class="card-body">Card1 content</div></div>
                            <div class="card"><div class="card-body">Card2 content</div></div>
                            <div class="card"><div class="card-body">Card3 content</div></div>
                            <div class="card"><div class="card-body">Card4 content</div></div>
                            <div class="card"><div class="card-body">Card5 content</div></div>
                            <div class="card"><div class="card-body">Card6 content</div></div>
                            <div class="card"><div class="card-body">Card7 content</div></div>
                            <div class="card"><div class="card-body">Card8 content</div></div>
                            <div class="card"><div class="card-body">Card9 content</div></div>
                            <div class="card"><div class="card-body">Card10 content</div></div>
                            <div class="card"><div class="card-body">Card11 content</div></div>
                            <div class="card"><div class="card-body">Card12 content</div></div>
                            <div class="card"><div class="card-body">Card13 content</div></div>
                            <div class="card"><div class="card-body">Card14 content</div></div>
                            <div class="card"><div class="card-body">Card15 content</div></div>
                            <div class="card"><div class="card-body">Card16 content</div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

3 个答案:

答案 0 :(得分：0)

  

未在Firefox和Edge中显示滚动条

为此，您需要更改溢出-y属性

来自

  

overflow-y：隐藏；

到

  

溢出-y：滚动；

谢谢！

html, body {
      height: 100%;
    }

    .overflow-auto {
      overflow: auto;
    }

    .card-main {
      height: 100%;
      overflow-y: scroll;
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container-fluid h-100">
    <div class="card card-main">
        <h5 class="card-header text-center bg-primary text-white">Agenda</h5>
        <div class="card-body h-100 d-flex flex-column">
            <div class="form-group row bg-success flex-shrink-0" id="div1">Some content here</div>
            <div class="form-group row mt-1 d-flex flex-fill flex-grow-1">
                `<div class="col-auto bg-danger d-flex flex-column" id="div2">
                    <table class="bg-secondary" style="border: solid grey 1px;">
                        <tr>
                            <td>r1c1</td>
                            <td>r1c2</td>
                        </tr>
                        <tr>
                            <td>r2c1</td>
                            <td>r2c2</td>
                        </tr>
                    </table>
                </div>
                <div class="col d-flex flex-column">
                    <div class="form-group row flex-shrink-0">
                        <div class="col-6" id="div3">Date text</div>
                        <div class="col-3" id="div4">Today</div>
                        <div class="col-3" id="div5">Other icon</div>
                    </div>
                    <div class="form-group row d-flex flex-fill flex-grow-1 overflow-auto">
                        <div class="col-12 overflow-auto" id="divAgendaDia">
                            <div class="card"><div class="card-body">Card1 content</div></div>
                            <div class="card"><div class="card-body">Card2 content</div></div>
                            <div class="card"><div class="card-body">Card3 content</div></div>
                            <div class="card"><div class="card-body">Card4 content</div></div>
                            <div class="card"><div class="card-body">Card5 content</div></div>
                            <div class="card"><div class="card-body">Card6 content</div></div>
                            <div class="card"><div class="card-body">Card7 content</div></div>
                            <div class="card"><div class="card-body">Card8 content</div></div>
                            <div class="card"><div class="card-body">Card9 content</div></div>
                            <div class="card"><div class="card-body">Card10 content</div></div>
                            <div class="card"><div class="card-body">Card11 content</div></div>
                            <div class="card"><div class="card-body">Card12 content</div></div>
                            <div class="card"><div class="card-body">Card13 content</div></div>
                            <div class="card"><div class="card-body">Card14 content</div></div>
                            <div class="card"><div class="card-body">Card15 content</div></div>
                            <div class="card"><div class="card-body">Card16 content</div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

答案 1 :(得分：0)

尝试使用overflow-y: hidden代替overflow-y: scroll。

答案 2 :(得分：0)

我能够找到解决问题的方法。这是一个已知的firefox错误。只需添加“ style =” max-height：0; “”进入子div，滚动条将完美显示。还需要删除＃div6中的溢出类。

在完整调整后的代码下方。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example nested</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
  <style>
    html, body {
      height: 100%;
    }

    .overflow-auto {
      overflow: auto;
    }

    .card-main {
      overflow: hidden;
    }
  </style>

  <div class="container-fluid h-100">
    <div class="card card-main h-100">
      <h5 class="card-header text-center bg-primary text-white">Agenda</h5>
      <div class="card-body d-flex flex-column h-100">
        <div class="form-group row bg-success flex-shrink-0" id="div1">Some content here</div>
        <div class="form-group row d-flex flex-fill flex-grow-1">
          <div class="col-auto bg-danger d-flex flex-column" id="div2">
            <table class="bg-secondary" style="border: solid grey 1px;">
              <tr><td>row1col1</td><td>row1col2</td></tr>
              <tr><td>row2col1</td><td>row2col2</td></tr>
            </table>
          </div>
          <div class="col d-flex flex-column">
            <div class="form-group row flex-shrink-0">
              <div class="col-6" id="div3">Date text</div>
              <div class="col-3" id="div4">Today</div>
              <div class="col-3" id="div5">Other icon</div>
            </div>
            <div class="form-group row d-flex flex-grow-1 flex-fill overflow-auto">
              <div class="col-12" id="div6" style="max-height: 0;">
                <div class="card"><div class="card-body">Card0 content</div></div>
                <div class="card"><div class="card-body">Card1 content</div></div>
                <div class="card"><div class="card-body">Card2 content</div></div>
                <div class="card"><div class="card-body">Card3 content</div></div>
                <div class="card"><div class="card-body">Card4 content</div></div>
                <div class="card"><div class="card-body">Card5 content</div></div>
                <div class="card"><div class="card-body">Card6 content</div></div>
                <div class="card"><div class="card-body">Card7 content</div></div>
                <div class="card"><div class="card-body">Card8 content</div></div>
                <div class="card"><div class="card-body">Card9 content</div></div>
                <div class="card"><div class="card-body">Card10 content</div></div>
                <div class="card"><div class="card-body">Card11 content</div></div>
                <div class="card"><div class="card-body">Card12 content</div></div>
                <div class="card"><div class="card-body">Card13 content</div></div>
                <div class="card"><div class="card-body">Card14 content</div></div>
                <div class="card"><div class="card-body">Card15 content</div></div>
                <div class="card"><div class="card-body">Card16 content</div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>
相关问题
最新问题