2

Please note I will not accept any answers that prevent bootstrap from being usable

The scenario is as follows: I have a parent element (div) with two child elements (also divs) nested inside. I would like the children to be able to fill the height of the parent regardless of the content that is in side the children. On top if this, if the parent element is not tall enough to contain the child content, I would like the parent element to stretch to the necessary height to display the content within the children.

A non-working example is located here: https://jsfiddle.net/uqh76pku/2/

<div class="row content">
  <div class="col-xs-3 section">text content goes here</div>
  <div class="col-xs-9 section">text content goes here</div>
</div>

Many of the answers I have found (listed below) provide information which simply does not work. I have tried the following list of answers.

How to stretch div height to fill parent div - CSS

CSS - Expand child DIV height to parent's height

Stretch Child DIV to Height of Parent (Without hardcoding height)

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
guest29837
  • 21
  • 2
  • Refer this link , without javascript you can achieve this using css table approch http://jsfiddle.net/unmeshdusane/xp91qq8t/1/ – UnmeshD Dec 30 '15 at 07:46
  • In the event that I attempt to use borders with the parent class, this fails. This also causes the layout to have extra divs, which is undesirable as well. – guest29837 Dec 30 '15 at 07:55
  • If you want to give border to parent class then you have to specify it to child element . this approach is suitable if you have to support old browsers. then at last use javascript but adding extra div is best as compare to javascript – UnmeshD Dec 30 '15 at 08:40
  • Are we talking about the **actual** height, or you just want them to appear like they are the same height? – xpy Feb 12 '16 at 13:49

0 Answers0