Question

我正在尝试使用带有整个页面高度的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>

Answer 1

那是因为您的父div没有高度。当您使用％时，它是相对的。我的意思是人们通常说100％或100％了。

Answer 2

使用样式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>

bootstrap 4 flex问题不能满足父母身高的100％

2 个答案: