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

有没有办法让我的两列扩展到100％父div的高度？

Answer 1

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

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

要防止不同的高度，您必须为.w3-containers添加一些高度值。

Answer 2

使用flex

.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放在带w3-row类的div上：

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

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

3 个答案: