I’m using twitter bootstrap and I can’t find anywhere answer for this question. I’m trying to change height of div to fit height of two divs next to it. I don’t know if this is good explanation, so I’ll try show my problem using pictures. How to make from this:
HTML:
<div class ="col-md-4 main-card-wrapper">
<div class="main-card">1</div>
</div>
<div class ="col-md-4 main-card-wrapper">
<div class="main-card">2</div>
</div>
<div class ="col-md-4 main-card-wrapper">
<div class="main-card">3</div>
</div>
<div class ="col-md-12 main-wrapper">
<div class ="col-md-4 main-card-wrapper">
<div class="main-card">4</div>
</div>
<div class ="col-md-8 main-wrapper">
<div class ="col-md-6 main-card-wrapper">
<div class="main-card">5</div>
</div>
<div class ="col-md-6 main-card-wrapper">
<div class="main-card">6</div>
</div>
<div class ="col-md-12 main-card-wrapper">
<div class="main-card">7</div>
</div>
</div>
</div>
CSS:
.main-card-wrapper {
padding-left: 0.1em !important;
padding-right: 0.1em !important;
}
.main-wrapper {
padding-left: 0em !important;
padding-right: 0em !important;
}
.main-card {
display: inline-block;
padding: 2em;
width: 100%;
margin: 0.1em;
color: #ddffdd;
background-color: #879eff;
text-align: center;
}
.main-card:hover {
color: #f4f4f4;
background-color: #6185ff;
}
2
Answers
try giving the div you want to resize a unique class or an id and then in CSS give it height 100% or auto.
If you nest one grid inside the other, number 4 will be able to gain the full height of its own column as you add content to it. It’s going to work if you just add some fixed height to them as well.