Div not taking height of parent div (w/ bootstrap)

Question

I'll start off by stating that I know this question has been asked a lot, but none of the answers I saw seemed to work for me.

Basically, I have some divs inside of a larger div. They'll have dynamic text, so I don't know how many lines each will be. The problem is that I can't seem to get the divs to size themselves to the parent's height. I want the column divs to take up the entire height of the row div (basically, I want that blue part to fill all the space between the bars).

HTML:

<div class="container">
    <div class="row divOne">
        <div class="col-xs-3 divTwo">Some Text</div>
        <div class="col-xs-3">
            Some text that could wrap to multiple lines
        </div>
    </div>
    <div class="row divOne">
        <div class="col-xs-3 divTwo">Different Text</div>
        <div class="col-xs-3 divThree">
            With some more text
        </div>
    </div>
</div>

CSS:

.divOne
{
    border-top:10px solid black;
}

.divTwo
{
    background-color: #32649b;
    height:100%;
    color:white;
}

jsfiddle:

Now, what I've learned from other versions of this question are that

float:left might be screwing it up
height:100% doesn't work if the parent's height is defined
position:relative might help on the parent

The problem with the float is that I'm using bootstrap, and that's where the float is coming from, so I don't really want to mess with that.

I can't really define parent height, because it'll be dynamic based on the children.

I also tried messing around with position:relative on the parent and absolute on the child, but that seemed to get really screwy. I'm also guessing this won't work because I'm using bootstrap. It's possible that I'm just missing something, though. I'll admit to not being the greatest with CSS.

I don't know if I'm having these issues because I'm using bootstrap, or because I'm just being an idiot right now.

Something else that seems to be throwing a wrench into things: These columns will be laid out differently on smaller screens vs. larger ones. I actually want something along the lines of col-xs-12 col-md-3 for these.

Actually I don't understand what you are trying to accomplish ? why are you using 2 rows of bootstrap if you want each row to be 100% of the height of your container? — Hemadeus, Dec 19 '14 at 18:05
Sorry, I don't think I clarified enough. Basically, I the columns inside the row to be the size of the row, so I want that blue background part to be the size of the row. — Dominator_101, Dec 19 '14 at 18:07
have a look here http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height. I think the accepted answer is what you are looking for — tmg, Dec 19 '14 at 18:08
@Hemadeus no problem, I should have clarified more. tmg, That seems to be doing what I want so far, I'll give it a shot. Thanks! — Dominator_101, Dec 19 '14 at 18:15
@tmg This partially works. When I have it horizontal it works, but on a smaller screen it'll have the blue section above the other section, and that solution adds the background behind the other element. I suppose I could stick a white background on the other element, but that seems messy. — Dominator_101, Dec 19 '14 at 18:20
Ok. check this then http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height With these extra classes you can have a css table on larger screens and normal floating col-xs divs in smaller screen — tmg, Dec 19 '14 at 18:26

score 0 · Answer 1 · answered Dec 19 '14 at 18:16

The short answer is that you can't really achieve this within the constraints of the bootstrap framework. There are plenty of articles that explain why div elements can't stretch to the height of their container, and how to get around this problem. One of the solutions I'm most fond of is Faux Columns.

But, let's get a little more creative then that.

I came up with something that might work for your scenario, but requires a bit of change to your markup. Here's a solution that wraps the bootstrap grid with display: table.

http://jsfiddle.net/Wexcode/13Lfqmjo/

HTML:

<div class="table-container">
    <div class="table-row divOne">
        <div class="col-xs-3 divTwo">Some Text</div>
        <div class="col-xs-3">
            Some text that could wrap to multiple lines
        </div>
        <div class="col-xs-6"></div>
    </div>
</div>

CSS:

.table-container {
    margin: 0 -15px;
}

.table-row {
    display: table;
    width: 100%;
}

.table-row [class^="col"] {
    display: table-cell;
    padding: 0 15px;
    float: none;
}

Note that for this solution to work, you must include enough col elements to stretch it all 12 columns (see that I added an empty .col-xs-6 div).

I think this is another solution that gets screwed up by the fact that I want to have the columns stacked on a smaller screen (in actuality, I'll have them each as col-xs-12 col-md-3 or something like that). I'll try tweaking a few things, but I was kinda afraid that bootstrap was going to pretty much get in the way of getting what I want. — Dominator_101, Dec 19 '14 at 18:30
You could add media queries similar to how bootstrap does media queries for their column elements... replace `display: table-cell` with `display: table-row` and it'll effectively be the same. — Wex, Dec 19 '14 at 19:09

score 0 · Answer 2 · answered Jul 06 '19 at 06:35

0

You can add

display:flex;

to divOne , and will act like you wanted. in bootstrap 4 'row' class applies this on div, but in ealier versions you need to add manually if you expect such behavior.

answered Jul 06 '19 at 06:35

AbbasEbadian

653
5
15

score 0 · Answer 3 · answered Jul 06 '19 at 06:39

Give .divOne a display: flex and remove the height: 100% from .divTwo:

.divOne
{
    border-top:10px solid black;
    display: flex;
}

.divTwo
{
    background-color: #32649b;
    /*height:100%;*/
    color:white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row divOne">
        <div class="col-xs-3 divTwo">Some Text</div>
        <div class="col-xs-3">
            Some text that could wrap to multiple lines
        </div>
    </div>
    <div class="row divOne">
        <div class="col-xs-3 divTwo">Different Text</div>
        <div class="col-xs-3 divThree">
            With some more text
        </div>
    </div>
</div>

Div not taking height of parent div (w/ bootstrap)

jsfiddle:

3 Answers3

Linked