时间戳

首页 > 解决方案 > bootstrap 4 flex 问题未填充父高度的 100%

html - bootstrap 4 flex 问题未填充父高度的 100%

问题描述

我试图让一个 2 列网格与占用整个页面高度的 boostrap flex 一起工作。出于某种原因，此代码没有填充 100% 的页面。

body 标签的宽度和高度为 100%。我已经包含了下面的代码片段。没有创建其他 CS。

<div class="d-flex flex-row w-100 h-100 border">
    <div class="d-flex flex-column h-100 border ">
        test
    </div>
    <div class="d-flex flex-column h-100 border ">
        test
    </div>
</div>

标签： htmlcssflexbox

解决方案

要使用样式height: 100%。您需要提供父高度值。如果父高度仍在使用height: 100%... 直到根（body, html）。您需要将 html 和 body 标签的高度值设置为 100%。

html, body {
  height: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="d-flex flex-row w-100 h-100 border">
    <div class="d-flex flex-column h-100 border ">
        test
    </div>
    <div class="d-flex flex-column h-100 border ">
        test
    </div>
</div>

我已经用一些项目flex-column为你测试了一个例子。

html, body {
  height: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="d-flex flex-row w-100 h-100 border">
    <div class="d-flex flex-column h-100 border ">
        <p>Item 1</p>
        <p>Item 2</p>
        <p>Item 3</p>
    </div>
    <div class="d-flex flex-column h-100 border ">
        <p>Item 1</p>
        <p>Item 2</p>
        <p>Item 3</p>
    </div>
</div>

推荐阅读