Force Nested Divs to Have Min-Height of 100%

Force nested divs to have min-height of 100%?

min-height: inherit; should work: http://jsfiddle.net/ugxbs/

EDIT

As for percentage values and the expected behavior, there is no logic behind nested min-height. What you should do is to use the height property for all parents, then add min-height to the inner most DIV.

F.ex:

<html>
    <body>
        <div class="outer">
            <div class="inner"></div>
        </div>
    </body>
</html>

CSS:

html, body, .outer { height: 100% }
.inner { min-height: 100%; }

http://jsfiddle.net/4PsdT/

This way, you are telling the browser to set all outer elements from the top (HTML) to a height of 100%. This will make these elements stretch across the browser height. Then just add a min-height to the inner most element that contains the content.

Setting a height doesn’t mean that it’s children’s excessive content will fall out, unless you add overflow:hidden;.

Inner div with 100% height of parent div

Not any large reason you are use two times height property with different value that's why not work,

Check this `Demo jsFiddle`

position: relative; another display: block; and third height: 100%; this three properties are great roll to archive 100% height.

CSS

html, body{
    height: 100%;
}
.hlavicka{
    position: relative;
    float: left;
    width: 260px;
    height:100%;
    background-color: grey;
}
.obsah_in_1_3 {
    float: left;
    width: 33%;
    background-color: #FF0000;
    height: 100%;
}
.obsah_in_2_3 {
    float: left;
    width: 33%;
    background-color: #00FF00;
    height: 100%;
}
.obsah_in_3_3 {
    float: left;
    width: 34%;
    background-color: #0000FF;
    height: 100%;
}
.obsah{
    position: relative;
    display: block;
    height: 100%;
    float: left;
    width: 50%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: blue;
}

Hope now this help you!

nested div does not fill parent div with min-height 100%

The solution for me was to use multiple backgrounds rather than the extra div overlay. I did it in the CSS2 pseudo elements fashion (::before with an background pattern) described here:

http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Height 100% not working for nested div

Height 100% is a very elusive issue, and normally creates more problems than it solves. However, to answer your question:

Basically, every container between the html element and the element you want to be 100% must have height: 100%; on it.

So, in your case, this means the following CSS must be added:

/* These styles get all of the containers to 100% height */
/* address ONLY sub-elements of .hero element to prevent issues with other pages / code */
.hero .container-fluid,
.hero .row,
.hero [class*="col-"] {
   height: 100%;
}

Below is your code, built into a snippet, so you can see it work. Note that I've additionally added col-sm-6 classes to your col-lg-6 elements so you can see it work in a narrower window. (NOTE: click the "Expand Snippet" link in order to get a wide enough window to see it working).

html,body {  height: 100%;}
.hero {  width: 100%;  height: 100%;  border: 1px solid #0094ff;}
.hero-image {  width: 100%;  height: 100%;  background-image: url('http://via.placeholder.com/500x100');  background-size: cover;}
/* These styles get all of the containers to 100% height */.hero .container-fluid,.hero .row,.hero [class*="col-"] {   height: 100%;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><section class="hero">  <div class="container-fluid">    <div class="row">      <div class="col-lg-6 col-sm-6">        <div class="hero-image">          Hello        </div>      </div>      <div class="col-lg-6 col-sm-6">        <div class="hero-content">          <h1>Hey, I Am Mike Ross</h1>          <p>            Creative Art Director from San Francisco. Husband, photographer, surfer and tech fanatic.          </p>        </div>        <div class="skills">
        </div>      </div>    </div>  </div></section>

Min-height 100% inner div

I actually got quite curious about how to solve this "issue". It works the way you want it if you apply display: table to the outer div and display: table-cell on the inner div.

1. Fiddle: Minimum height 100% without any content
http://jsfiddle.net/5ML3W/1/

2. Fiddle: Both div's expand if content is added to the inner div
http://jsfiddle.net/TVY6K/

And here is the CSS:

html, body{
    height:100%;
    margin: 0;
}

*, *:before, *:after {
  -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
 }

.outer {
    height: 100%;
    width: 500px;
    background: green;
    display: table;
    padding: 0 50px;

}
.inner {
    display: table-cell;
    width: 250px;
    background: red;
}

Force Nested Divs to Have Min-Height of 100%