响应式 html 布局高度 100% 不符合父级 div

Question

我真的是新来的 html

这是我的代码

<div class="w3-row">
    <div class="w3-container w3-half w3-padding-64 w3-orange w3-text-white w3-center" style="height:100%">
        <p style="font-size:calc(11px + 1vw);"> OUR <b>VISION</b></br></br>
        To become the best foundation that is able to nurture holistic global leaders</p>
    </div>


    <div class="w3-container w3-half w3-padding-64 w3-orange w3-text-white w3-center" style="height:100%">
        <p style="font-size:calc(11px + 1vw);"> OUR <b>MISSION</b></br></br>
        Developing young muslim leaders by nurturing entrepreneurial mindset in order to provide the best
        solution for mankind through Islamic values</p>
    </div>
</div>

所以我有 2 列连续。事情是这样的

my first column leaves empty white space below it

有什么方法可以让我的两个列都扩展到父 div 的 100% 高度？

Answer 1

这就是响应式布局的问题。

将橙色背景色添加到 w3 行。

为了防止出现不同的高度，您必须向 .w3 容器添加一些高度值。

Answer 2

使用弹性

.w3-row{
display: flex;
align-items: center;
}

.w3-container {
flex: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="w3-row">
    <div class="w3-container w3-half w3-padding-64 w3-orange w3-text-white w3-center" style="height:100%">
        <p style="font-size:calc(11px + 1vw);"> OUR <b>VISION</b></br></br>
        To become the best foundation that is able to nurture holistic global leaders</p>
    </div>


    <div class="w3-container w3-half w3-padding-64 w3-orange w3-text-white w3-center" style="height:100%">
        <p style="font-size:calc(11px + 1vw);"> OUR <b>MISSION</b></br></br>
        Developing young muslim leaders by nurturing entrepreneurial mindset in order to provide the best
        solution for mankind through Islamic values</p>
    </div>
</div>

Answer 3

一种解决方案是像@Supraja 建议的那样使用 flex，但更简单的解决方案是将橙色 bg 提供给列的容器而不是列本身。

所以把 .w3-orange 放在 div 上 w3-row class:

<div class="w3-row w3-orange">

响应式 html 布局高度 100% 不符合父级 div

Responsive html layout height 100% is not according to parent div

html

css

w3.css