Div´s height: 100% does not work - html

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.

Answer 1

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.

Answer 2

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>

Answer 3

You can set the height to 100vh

Answer 4

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;
}

Answer 5

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;
}
(...)