CSS div高度不调整

Question

我想在我的页面中显示一个 100% 高度的 div: https://jsfiddle.net/pkggv96j/

<div id="page-content-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-7 mapContainer">
                <div class="GISMap" v-el:map>test</div>
            </div>
            <div class="col-md-5 incidentContainer">
                <div class="incidentForm">test</div>
            </div>
        </div>
    </div>
</div>

// --Page Content
#page-content-wrapper {
  position: relative;
  height: 100%;
  padding: 0px;
}

.row .mapContainer {
  padding: 0px;
  height: 100%;
  background-color: red;
}

.GISMap {
  height: 100%;
  background-color: lightblue;
}

.incidentForm {
  height: 100%;
  width: 100%;
  background-color: lightgray;
}

.row .incidentContainer {
  padding: 0px;
  height: 100%;
}

但是 row 只有 20pt 的高度并且没有缩放到 100%。我是否错过了将高度设置为 100% 的包围元素？

Answer 1

这是你想要的吗？

html, body {
  height: 100%;
  margin: 0;
}

#page-content-wrapper {
  height: 100%;
  padding: 0px;
  background-color: red;
}

.row, .container-fluid {
  height: 100%;
}

.row .mapContainer {
  padding: 0px;
  height: 100%;
  background-color: red;
}

.GISMap {
  height: 100%;
  background-color: lightblue;
}

.incidentForm {
  height: 100%;
  width: 100%;
  background-color: lightgray;
}

.row .incidentContainer {
  padding: 0px;
  height: 100%;
}

<div id="page-content-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-7 mapContainer">
                <div class="GISMap" v-el:map>test</div>
            </div>
            <div class="col-md-5 incidentContainer">
                <div class="incidentForm">test</div>
            </div>
        </div>
    </div>
</div>