Bootstrap4、全高全宽布局，chrome可以，firefox/ie11不行

Question

我有一个我正在尝试做的事情的简单原型。 Chrome 没问题，但它在 firefox 或 IE11 中不起作用（还没有尝试过 Edge）。我正在使用 'container-fluid' 来获得全宽，'h-100' to get full-height, and 'overflow-y' because I want to be able my left and right sections to scroll vertically as needed. What I see is the left-hand section contents overflows the section. I tried adding 'min-height' ，但它没有什么不同。

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

这里您遇到了使用基于百分比的身高时最常见的错误之一。

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

通过将 h100 添加到 .row 和这条规则，它将起作用

html, body {
  height: 100%;
}

堆栈片段

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

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

Bootstrap4、全高全宽布局，chrome可以，firefox/ie11不行

Bootstrap 4, full-height, full-width layout, chrome ok, firefox/ie11 not

css

overflow

flexbox

twitter-bootstrap

bootstrap-4