Question

我有一个简单的原型，我正在尝试做什么。 Chrome可以很好用，但它在firefox或IE11中没有用（没有尝试Edge）。我正在使用容器流体＆＃39;获得全宽，＆＃39; h-100＆＃39;获得全高，并且溢出＆＃39;因为我希望我的左右部分能够根据需要垂直滚动。我看到的是左侧部分内容溢出该部分。我尝试添加“min-height＆＃39; per this answer，但它并没有什么不同。

这是一个bootstrap错误（这是beta 2），还是我需要设置一些额外的样式？

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

  <style>
    .border {
      border-width: 5px !important;
    }
  </style>
</head>

<body>

<div class="container-fluid h-100 border border-danger">
  <div class="row">
    <div class="col-3 h-100 border border-success"
         style="overflow-y: auto;">
      <div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
            <span class="active">More...</span>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
            <span class="active">More...</span>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
            <span class="active">More...</span>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
            <span class="active">More...</span>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
            <span class="active">More...</span>
          </div>
        </div>
      </div>
    </div>

    <div class="col h-100 border border-primary"
         style="overflow-y: auto;">
      Info...<br>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Wide_panorama_of_Aam_Talab_Lake%2C_Raichur.jpg/1280px-Wide_panorama_of_Aam_Talab_Lake%2C_Raichur.jpg">
    </div>
  </div>
</div>


</body>
</html>

Answer 1

在使用基于百分比的高度时，您会遇到最常见的错误之一。

除非元素的父级具有高度（或绝对位置），否则使用百分比高度的元素将无法工作，如果父级也使用百分比，则其父级需要高度，因此on，直到到达html元素，从视口的高度获得它的高度。

将h100添加到.row和此规则，它将起作用

html, body {
  height: 100%;
}

Stack snippet

＆＃13;

html, body {
  height: 100%;
}
.border {
  border-width: 5px !important;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

<div class="container-fluid h-100 border border-danger">
  <div class="row h-100">
    <div class="col-3 h-100 border border-success"
         style="overflow-y: auto;">
      <div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
            <span class="active">More...</span>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
            <span class="active">More...</span>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
            <span class="active">More...</span>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
            <span class="active">More...</span>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
            <span class="active">More...</span>
          </div>
        </div>
      </div>
    </div>

    <div class="col h-100 border border-primary"
         style="overflow-y: auto;">
      Info...<br>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Wide_panorama_of_Aam_Talab_Lake%2C_Raichur.jpg/1280px-Wide_panorama_of_Aam_Talab_Lake%2C_Raichur.jpg">
    </div>
  </div>
</div>

＆＃13;

Bootstrap 4，全高，全宽布局，chrome ok，firefox / ie11没有

1 个答案: