如何給彈性項目100％的高度？

Question

我有以下標記。 footer-info class 有一些樣式，我希望每列內的高度相同，無論存在多少文本。

我不想在可能的情況下將樣式應用於列類，並且如果可能的話，我也更願意避免 position 相對/絕對。 有沒有優雅的解決方案？

我想要的結果是每個footer-info填充父行的高度（等高列）。

我把它放在一個jsfiddle中： https://jsfiddle.net/ntxc305e/

 .container-fluid { padding-right: 2rem; padding-left: 2rem; margin-left: auto; margin-right: auto; }.row { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -0.5rem; margin-left: -0.5rem; }.col-md { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; }.footer-info { background-color: rgba(36, 36, 36, 0.8); color: #f7f7ef; padding: 20px; }

 <div class="container-fluid"> <div class="row"> <div class="col-md"> <div class="footer-info"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae sunt, vero, minima perspiciatis sit autem natus aspernatur labore pariatur dicta aut iure eum doloremque suscipit dolorum, temporibus reiciendis. Veniam, nostrum. </p> </div> </div> <div class="col-md"> <div class="footer-info"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum recusandae qui accusamus similique explicabo mollitia quas, unde deserunt aperiam ipsam non distinctio totam officiis incidunt enim soluta odio saepe. Ullam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus suscipit voluptas nobis ad sit beatae, quaerat, harum reiciendis autem rerum est molestiae. Quisquam optio rerum consequuntur doloribus corporis suscipit aliquid!</p> </div> </div> <div class="col-md"> <div class="footer-info"> <p>Small column</p> </div> </div> </div> </div>

Answer 1

使用您發布的 jsfiddle 示例，解決方案實際上非常簡單！ 您示例中的row是一個彈性容器，而col-md元素是他的彈性項目。 flex 項的重要之處在於，它們填充了容器的高度，這意味着您的所有col-md項都垂直填充了row ，因此已經具有相同的高度。 同時，您的footer-info元素始終是col-md元素的直接子元素，這意味着您唯一需要做的就是將footer-info的高度設置為 100% 以填充其父元素（ col-md ） 高度。 我在這里為您創建了一個簡化的示例：

 .row { display: flex; justify-content: space-around; }.col-md { flex-basis: 30%; }.footer-info { box-sizing: border-box; background-color: rgba(36, 36, 36, 0.8); color: #f7f7ef; padding: 20px; height: 100%; }

 <div class="row"> <div class="col-md"> <div class="footer-info"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae sunt, vero, minima perspiciatis sit autem natus aspernatur labore pariatur dicta aut iure eum doloremque suscipit dolorum, temporibus reiciendis. Veniam, nostrum. </p> </div> </div> <div class="col-md"> <div class="footer-info"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum recusandae qui accusamus similique </p> </div> </div> <div class="col-md"> <div class="footer-info"> <p>Small column</p> </div> </div> </div>

Answer 2

試試這個：

.footer-info {
    height: 100%;
    box-sizing: border-box;
}

對於box-sizing ，請點擊此鏈接https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 3

使用嵌套的 flex 容器為頁腳提供行的完整高度。 將此添加到您的代碼中：

.col-md {
  display: flex; /* new */
}

.footer-info {
  flex: 1; /* new */
}

修改后的演示

當您創建一個 flex 容器時，它會自動將子項（flex 項）設置為align-self: stretch ，這會使它們在橫軸的整個長度上展開。 在行方向容器中，橫軸是垂直的（即高度）。