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

这是你想要的吗？

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

CSS div高度不调整

1 个答案: