更新

Question

我的网页上有以下布局：

左侧，由D表示，是完美的。那里有很多内容，它应该滚动。即使内容增长，当滚动增加时，高度仍然是网页高度的100％。

右侧在B上有一些内容。一切都很好。使用Bootstrap 4，B和A在row内col，因此拥有父容器的50％份额。

问题是我会A在可滚动的同时填充所有剩余空间，而不受其中C个数的影响。这意味着对于1 C，它的高度应该是页面高度的一半（如图所示），并且通过具有20 C s，它应该占据相同的高度（同时可滚动）这样用户可以通过滚动到C的底部来查看第20个A。

所以，如果我将硬编码高度设置为A，我可以在height=350px上实现垂直可滚动性，但这远非理想，因为桌面具有不同的高度。另一方面，如果我没有设置高度，A的高度将成为将所有元素包含在其中所需的高度，因此使用4 C s，右边bg布局已经超过了留下网页的一部分，导致整体布局中断。

<div class="right-bg">
<div class="container col" style="height:100%">
  <div class="row"> <!-- THIS IS B -->
    <div class="col"> 
      <div class="row" id="chart-div">
        <canvas id="myChart"></canvas>
      </div>
      <div class="row horizontal-menu-wrapper">      
      </div>
    </div>
  </div>
  <div class="container row ranking-container"> <!-- THIS IS A -->
    <div class="container rounded-card"> <!-- THIS IS C -->
      <div class="row">
        <div class="col-lg-1 col-md-1 col-sm-1">
          <div id="ranking-trophy-header" class="row card-header">
            <i title="General" class="fas fa-trophy header-icon"></i>
          </div>
        </div>
        <div class="col-lg-11 col-md-11 col-sm-11">
          <div class="row row-card">
            <div class="col-lg-5 col-md-5 col-sm-5">
              <p class="ranking-percentage-value"> Top 1%</p>
            </div>
            <div class="col ranking-field">
              <p class="form-field">Position</p>
              <p class="form-ranking-value"><span class="absolute-ranking">#<span class="absolute-ranking-value">83</span></span></p>
            </div>
            <div class="col ranking-field">
              <p class="form-field">Pool</p>
              <p class="form-pool-value">9470</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

html {
  height: 100%;
}

body {
  height: 100%;
}

.left-bg {
  flex-flow: column;
  display: flex;
  width: 54%;
  height: 100%;
  overflow: scroll;
  padding-bottom: 10px;
}

.right-bg {
  flex-flow: column;
  display: flex;
  width: 46%;
  height: 100%;
  padding-top: 12px;
}

.ranking-container {
  vertical-align: center;
  margin: 5px;
  margin-top: 15px;
  margin-bottom: 5px;
  padding: 15px;
  overflow: scroll;
  border-radius: 10px;
  margin-bottom: -9999px;
  padding-bottom: 9999px;
}

Answer 1

使用 d-flex ， flex-column 和 h-100 作为其父级。 flex-grow-1 表示您希望它占用所有可用空间的行。

html,
body {
  height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container d-flex flex-column h-100 bg-light">
  <div class="row">
    <div class="col p-5 bg-danger"></div>
  </div>
  <div class="row bg-info flex-grow-1">
    <div class="col"></div>
  </div>
</div>

无论您拥有多少row，它都能按预期工作。

https://codepen.io/anon/pen/RJVaKw

您需要使用bootstrap-4.1，因为早期版本中不存在flex-grow-1。

你的大多数风格都是不必要的。您可以使用纯Bootstrap类来实现此目的。

更新

它在Chrome中不起作用。要解决此问题，请对flex-grow-1行中的列使用flex-grow-1。并将 overflow-y 设置为 scroll 。您也可以隐藏滚动条。

html,
body {
  height: 100%;
}

.overflow-y-scroll {
  overflow-y: scroll;
}


/*hide scrollbar in webkit-browsers */

::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #FF0000;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container d-flex flex-column h-100 bg-light">
  <div class="row">
    <div class="col p-5 bg-danger"></div>
  </div>
  <div class="row bg-info flex-grow-1">
    <div class="col flex-grow-1 bg-primary overflow-y-scroll">
      <!-- content -->
    </div>
  </div>
</div>

https://codepen.io/anon/pen/jKmYdq

Answer 2

试一试：

＆＃13;

<div class="container col" style="position: absolute; top: 0px; bottom: 0px; ">
</div>

＆＃13;

Answer 3

您可以为任何块级元素提供明确的height，然后添加：

overflow: auto;

如果元素的内容高于元素自己显式声明的高度，则会向该元素添加滚动条。

这是一个类似于上面描述的布局，使用 CSS网格。

请注意，垂直滚动条会自动显示在 D 和 A 区域中，因为这些元素中的内容高于父元素本身的高度。

工作示例：

main { display: grid; grid-template-rows: 50% 50%; grid-template-columns: 50% 50%; width: 80vw; height: 80vh; border: 6px solid rgb(191, 191, 191); border-radius: 15px; } .a-area { background-color: rgb(255, 63, 63); } .b-area { background-color: rgb(255, 127, 0); } .c-area { border: none; background-color: rgb(63, 63, 63); } .d-area { grid-area: 1 / 1 / 3 / 2; color: rgb(127, 127, 127); } main div { color: rgb(255, 255, 255); border: 4px solid rgb(191, 191, 191); overflow-x: hidden; overflow-y: auto; } main div h2 { margin: 0; padding-right: 6px; font-size: 24px; line-height: 36px; text-align: right; } main div p, .c-area { margin: 6px 12px; }

<main> <div class="d-area"> <h2>D</h2> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> </div> <div class="b-area"> <h2>B</h2> </div> <div class="a-area"> <h2>A</h2> <div class="c-area"> <h2>C</h2> </div> <div class="c-area"> <h2>C</h2> </div> <div class="c-area"> <h2>C</h2> </div> <div class="c-area"> <h2>C</h2> </div> <div class="c-area"> <h2>C</h2> </div> <div class="c-area"> <h2>C</h2> </div> </div> </main>

如何让div拥有100％的父母身高，与孩子的体型无关？复杂的布局

3 个答案:

https://codepen.io/anon/pen/RJVaKw

更新