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.

Answer 1

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

(...)

Answer 2

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 3

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 4

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 5

You can set the height to 100vh