How to make responsive div height?

Question

do you know how to make height in a div is responsive? at the first picture is fullscreen mode which is quite perfect. but when i resize the screen (in the second picture) there was a big space between div number "1" and div number "3" because of the div number "2" height. For your info, I am using bootstrap.
Here's my div code:
div 1 = <div class="col-md-9 col-sm-9 col-xs-9" style="background-color:white;">
div 2 = <div class="col-md-3 col-sm-3 col-xs-3" align="middle" style="background-color:white;">
div 3 = <div class="row" style="background-color:white; bottom:0;" width="100%">
The div 1 and div 2 are in one div <div class="row" style="background-color:white;">
and all the div in on div <div class="container-fluid"

I want when I resize the screen it still place same like fullscreen mode, no space. enter image description here

enter image description here

How about adding a class `class="img-responsive"` to your image? — Sachi Tekina, Mar 31 '15 at 08:18
possible duplicate of [Make columns the same height in bootstrap](http://stackoverflow.com/questions/18227326/make-columns-the-same-height-in-bootstrap) — BENARD Patrick, Mar 31 '15 at 08:24

score 0 · Answer 1 · answered Mar 31 '15 at 08:19

0

The problem is that your div number 2 is in the same row as your div number 1. So the row of the both of them needs to be as tall as the tallest of them.

To fix this you can make a row in the column of div number 1 and put their your columns of div 1 and div 3.

so it would look like this

<row>
<col 1>
<row>
<col>
div 1 here
</col>
</row>
<row>
<col>
div 3 here
</col>
</row>
</col1>
<col 2>
div 2 here
</col 2>
</row>

This means however that your banner thingy will only spread across half of the screen.

answered Mar 31 '15 at 08:19

Robin

2,704
7
30
47

is there another way to my banner in div 3 still full width of the screen? – Putra Arifin Mar 31 '15 at 08:55
I don't know. you could center your image vertically, but if you work with the GRID I don't see a way to fix this. You either need to stretch your image, which makes it ugly, or make the font of the left part ridiculous small. – Robin Mar 31 '15 at 08:58

score 0 · Answer 2 · answered Mar 31 '15 at 08:21

If you are using jQuery you could do something like this

$(window).on('resize', function()
{
    // NOTE: You will need to give your divs ids.
    // I have given div 1 id = "div-1" and div 2 id = "div-2" for the purpose of this answer.
    var height = $('#div-1').height();
    $('#div-2').css('height', height);
});

What that will do is set the height of the right div to the height of the left div to give them the same height. You could also have things like font-size and letter spacing put in as well.

How to make responsive div height?

2 Answers2