CODEWITHSUNDEEP
csstwitter-bootstrap
sesc360
sesc360

Reputation: 3255

CSS div height not adjusting

I want to display a 100% height div within my page: 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%;
}

But row only has a height of 20pt and does not scale up to 100%. Did I miss an encompassing element to be set to height 100%?

Upvotes: 0

Views: 235

Answers (1)

Asons
Asons

Reputation: 87191

Is this what you want?

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>

Upvotes: 1

Related Questions