Div´s height: 100% does not work

Question

I have created a two column layout. Here is the jsfiddle.net . My issue is that I want the line in the center with a 10px width to have 100% height. I have created a container div with the id #obal (height: auto). If I set #cara .inner's height to 100%, the center line disappears. What do I have change?

Thanks for reply.

Make both columns a lot longer and then hide the extra space with overflow: hidden; to the container http://jsfiddle.net/oapu11q4/3/ — Jonas Grumann, Oct 20 '14 at 08:38
No need to scream! If you don't want both column same height, then what do you want?! !!!!??? — Jonas Grumann, Oct 20 '14 at 08:41
@JonasGrumann Read the question again, I reworded it for ondra15. — Mitch Talmadge, Oct 20 '14 at 08:42
Thanks Mitch. ondra, you can use the same trick I did just readapt it to work with the line http://jsfiddle.net/oapu11q4/4/ — Jonas Grumann, Oct 20 '14 at 08:43
I want to height div with id="obal" his height is same as height longer column. — ondra15, Oct 20 '14 at 08:44
Yes, set up height of `#obal` is solution. But I do not exactly height of longer column mostly. I want to universal solution height — ondra15, Oct 20 '14 at 09:03
possible duplicate of [How to horizontally center a div in a div?](http://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-a-div) — Mo., Oct 20 '14 at 09:06
did you want to have ID cara > inner div height equal to ID druhy > inner div ? or you want all 3 div's with equal height ? — brightboy2004, Oct 20 '14 at 09:06
@brightboy2004: I do not know that column will be longer. I can not set up height cara > inner as same as druhy > inner. Height of cara I want to have same as height of longer column. — ondra15, Oct 20 '14 at 09:19

score 1 · Answer 1 · answered Oct 20 '14 at 09:20

The issue here seems to be that when you set #cara . inner height to 100% it takes the full height of it's parent container - #cara that in this case is 0px;

The solution may look like this:

#obal {
 margin: 10px;
 height: 200px;
} 
#obal #cara {
    position: relative;
    float: left;
    left: -20px;
    height: 100%;
} 
#cara .inner {
    position: absolute;
 height: 100%;
 width: 10px;
    float: left;
 background: #336;
}
div#prvni {
 float: left;
 margin: 0px 30px;
 width: 120px;
 height: 100px;
 background: #ff3322;
 font-size: 0.95rem;
 overflow: hidden;
}  
div#prvni .inner,  div#druhy .inner{  
    padding: 10px;
}
div#druhy {
 width: 120px;
 height: auto;
 background: #393;
 font-size: 1rem;
 overflow: hidden;
    float: left;
}

<div id="obal">
    <div id="prvni">
     <div class="inner">Prvni cast text neni sice nejsilnejsi, ale spisovatel se snazi popsat dulezite body jeho navstevy
        </div>
 </div>
 <div id="cara">
     <div class="inner"></div>
 </div>
 <div id="druhy">
     <div class="inner">Druha cast mluvila hlavne o velkych problemech na startu, kdy se vsichni ucastnici nestihnuli pripravit a pote nasledovat zmatek. Jenze kazdy chtel vyhrat, tak to nevzdal <br> NIKDY :-)
         </div>
 </div>
</div>

Hope this helps.

score 1 · Answer 2 · answered Oct 20 '14 at 09:24

http://jsfiddle.net/oapu11q4/20/

===================== CSS ===================

#obal {
        display: table;
        height: auto;
        margin: 10px;
    }
    div#prvni {
        background: none repeat scroll 0 0 #ff3322;
        display: table-cell;
        font-size: 0.95rem;
        height: 100%;
        width: 120px;
    }   

    #obal #cara {
        background: none repeat scroll 0 0 #336;
        display: table-cell;
    }
    #cara .inner {
        width: 10px;
    }
    div#druhy {
        background: none repeat scroll 0 0 #393;
        display: table-cell;
        font-size: 1rem;
        height: 100%;
        width: 120px;
    }
    div#prvni .inner, div#druhy .inner {
        padding: 10px;
    }

===================== HTML =============================

<div id="obal">
    <div id="prvni">
        <div class="inner">Prvni cast text neni sice nejsilnejsi, ale spisovatel se snazi popsat dulezite body jeho navstevy
        </div>
    </div>
    <div id="cara">
        <div class="inner"></div>
    </div>
    <div id="druhy">
        <div class="inner">Druha cast mluvila hlavne o velkych problemech na startu, kdy se vsichni ucastnici nestihnuli pripravit a pote nasledovat zmatek. Jenze kazdy chtel vyhrat, tak to nevzdal <br> NIKDY :-)
         </div>
    </div>
</div>

score 0 · Answer 3 · answered Oct 20 '14 at 08:46

0

You can set the height to 100vh

answered Oct 20 '14 at 08:46

Su_race

47
1
10

Pedro Amaral Couto · Answer 4 · 2014-10-20T11:42:44.217

0

Try this:

http://jsfiddle.net/Ls6sqz2n/

You'd needed to add height: 100%; to the element ancestors, including html and body:

html, body {
    height: 100%;
}

#obal {
    margin: 10px;
    height: 200px;
    height: 100%;
}

#cara {
    position: relative;
    width: 10px;
    height: 100%;
    float: left;
}   
#cara .inner {
    position: absolute;
    right: 15px;
    height: 100%;
    width: 10px;
    background: #336;
}

(...)

edited Oct 20 '14 at 11:42

answered Oct 20 '14 at 09:15

Pedro Amaral Couto

2,056
1
13
15

I do not know that column will be longer. I can not set up height cara > inner as same as druhy > inner. Height of cara I want to have same as height of longer column. Not height cara 100% of body. – ondra15 Oct 20 '14 at 09:23

Pedro Amaral Couto · Answer 5 · 2014-10-20T11:42:14.993

Using #obal as a reference for #cara relative height:

#obal {
    margin: 10px;
    position: relative; overflow: hidden; 
}

#cara {
    float: left;
    margin-left: -20px;
}   
#cara .inner {
    position: absolute;
    width: 10px; height: 100%;
    background: #336;
}

(...)

From the specification:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

Using an overflow: hidden to cut the line with a huge height:

#obal {
    margin: 10px;
    overflow: hidden;
}

#cara {
    float: left;
    position: relative; right: 20px;
}   
#cara .inner {
    position: absolute; top: 0; left: 0;
    width: 10px; height: 10000px;
    background: #336;
}

(...)

Using flex:

#obal {
    margin: 10px;
    display: flex;
}

#prvni, #druhy {
    display: table;
}

Div´s height: 100% does not work

5 Answers5