CSS: min-height 100% of browser window

When we want to set min-height: 100% (of browser window), we must set all parents height: 100% (not min-height: 100%).
Let’s see this code:

<div id="wrapper">
  <div id="content">
    <div id="box">
      <div id="text"></div>
    </div>
  </div>
</div>

set #wrapper min-height: 100%

html, body {
  height: 100%;
}

#wrapper {
  position: static; /* or relative */
  min-height: 100%;
}

or set #content min-height: 100%

html, body, #wrapper {
  height: 100%;
}

#content {
  position: static; /* or relative */
  min-height: 100%;
}

now what if we want to set both #wrapper and #content min-height: 100%

this will not working:

html, body {
  height: 100%;
}

#wrapper {
  min-height: 100%;
}

#content {
  min-height: 100%;
}

min-height 100% in #content is not working because it’s parent hasn't height 100%
instead do this:

solution 1

html, body {
  height: 100%;
}

#wrapper {
  position: relative;
  min-height: 100%;
}

#content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

solution 2 (best)

html, body {
  height: 100%;
}

#wrapper {
  display: table;
  width: 100%; /* need when display table to be normal block */
  height: 100%; /* not min-height */
}

#content {
  display: table;
  width: 100%; /* need when display table to be normal block */
  height: 100%; /* not min-height */
}

use solution 2 to make multiple nest tags with min-height 100%.