CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Matteo Zaccagnino
Matteo Zaccagnino

Reputation: 23

Set height of content in a Bootstrap Card so that it fills the whole card block

I am struggling with the layout defined here: https://jsfiddle.net/zmcode/uk97kfLm/20/.

The problem is that the red div inside the card on the right should fill the whole card block.

Can someone help me in understanding how I should modify this layout in order to make the #right-card-content fill the whole right card block?

EDIT the solution proposed by @MateusFelipe actually works on Firefox. Unfortunately I need it to work on Chrome (v57) too.

Upvotes: 0

Views: 13706

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362290

I previously explained that h-100 is height: 100%, and this only works when the container has a defined height.

https://jsfiddle.net/1vgewck9/2/

<div class="row equal h-100">
  <div id="left-col" class="col-md-4 pr-md-2">
    <div class="card">
      Left Card
    </div>
  </div>
  <div id="right-col" class="col-md-8 pl-md-2">
    <div id="right-card-container">
      <div class="card">
        <div class="card-header">Right Card</div>
        <div class="card-block h-100">
          <div id="right-card-content" class="row">.</div>
        </div>
      </div>
    </div>
    <div id="right-bottom-element" class="mt-md-3">
      Right Bottom Element
    </div>
  </div>
</div>

Upvotes: 1

Mateus Felipe
Mateus Felipe

Reputation: 1161

This may solve your problem.

I've set the div's width to 100%, removed the row class from it, and removed the padding of parent (card-block) with p-0.

html, body {
  height: 100%;
}

div.card {
  height: 100%;
}

#left-col {
  height: 100%;
}

#right-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#right-card-container {
  flex: 1;
}

#right-card-content {
  height: 100%;
  width: 100%;
  background: red;
}

#right-bottom-element {
  background: blue;
  display: inline-block;
  height: 100px; 
  width: 100%;
}
<div class="row equal h-100">
  <div id="left-col" class="col-md-4 pr-md-2">
    <div class="card">
      Left Card
    </div>
  </div>
  <div id="right-col" class="col-md-8 pl-md-2">
    <div id="right-card-container">
      <div class="card">
        <div class="card-header">Right Card</div>
        <div class="card-block p-0">
          <div id="right-card-content"></div>
        </div>
      </div>
    </div>
    <div id="right-bottom-element" class="mt-md-3">
      Right Bottom Element
    </div>
  </div>
</div>

Upvotes: 0

Related Questions