Min-Height Does Not Work with Body

min-height does not work with body

First, declare a doctype so you're in standards if you haven't already.

Now, the body can only be as high as the containing html, so you need to set HTML tag to 100% height, and body to min-height 100%. This works for me on Firefox.

html {height:100%} 
body {min-height:100%}

Div height: 100% not working with body min-height: 100vh

The answer is simple as percentage min-height is calculated based on parent container's height value not min-height.

* {margin:0;}

body {
  background: gray;
  height: 100vh; /* look here */
}

.container {
  background: silver;
  margin: 0 20px;
  min-height: 100%;  /* look here */
}

<div class="container">
  <h1>Some generic title</h1>
  <p>Some random paragraph</p>
</div>

CSS height not working if body has min-height

I actually found a solution!

Now I have:

html, body {
    height:100%;
}

So my body is not min-height. I don't remember why I changed it to min-height, but I hope I won't face the issue I obviously faced some time ago...

min-height not working on the body

You can use display:flex for this:

html,body {  padding: 0;  margin: 0;  height: 100%}
main {  min-height:100%;  display: flex;  flex-direction: column;  background:blue;}
article {  flex-grow: 1;  background:green;}
footer {  background:orange;}

<main>  <article>... </article>  <footer> ... </footer></main>

Body, HTML min-height:100% does not get the entire height

Problem solved.

The issue is, I was setting the footer with a height: 20px; I dont know why but its thinner than it must have to work properly. When I set it thicker like to height: 35px; it works.

Min height not working properly?

You also need to give the html and body a height

html, body {
  height: 100%;
}

Update 1, after a question edit

With that new markup, also .page need height: 100%

html,body {  height: 100%;}
.page {  height: 100%;  border: 1px solid black;}
.child {  min-height: 100%;  border: 1px solid red;  display: flex;}

<div class="page">  <div class="child">    With firefox / IE, this CHILD div is not stretching to take 100% of the container.  </div></div>

height: 100% or min-height: 100% for html and body elements?

If you're trying to apply background images to html and body that fill up the entire browser window, neither. Use this instead:

html {
   height: 100%;
}

body {
   min-height: 100%;
}

My reasoning is given here (where I explain holistically how to apply backgrounds in this manner):

Incidentally, the reason why you have to specify height and min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.

The first way, using height: 100% on both, prevents body from expanding with its contents once they start to grow beyond the viewport height. Technically this doesn't prevent the content from scrolling, but it does cause body to leave a gap beneath the fold, which is usually undesirable.

The second way, using min-height: 100% on both, doesn't cause body to expand to the full height of html because min-height with a percentage doesn't work on body unless html has an explicit height.

For the sake of completeness, section 10 of CSS2.1 contains all the details, but it's an extremely convoluted read so you can skip it if you're not interested in anything beyond what I've explained here.

min-height: 100% doesn't seem to work, div does not take full height

You need to set parent elements height to 100% as well. In your case, set body's height to 100%.

html {  height: 100%;}
body {  padding: 1.25em;  background-color: #292c37;  border: 1px solid red;  height: 100%;}
.main-app {  min-height: 100%;  display: grid;  grid-template-rows: auto 1fr auto;  border: 1px solid green;}
header {  background-color: wheat;}
main {  background-color: firebrick;}
footer {  background-color: skyblue;}
header,main,footer {  padding: 1.25em;}

<div class="main-app">  <header>Header</header>  <main>Main</main>  <footer>Footer</footer></div>

css height~min-height:100% not work

You can use vh units. 100vh is 100% of the viewport height. This doesn't require setting the parents' heights and has good support - all browsers and ie >= 9.

body {      font-family: Helvetica, Arial, sans-serif;}
.divHeader a {    text-decoration:none;    color:#000;    font-weight:800;}
.wrapper {    padding:0;    margin:0 auto;    min-height:100vh;    width:100%;}
.divHeader, .divBody, .divFooter {    padding:5px;}
.divHeader {    height:15%;    clear:both;    display:block;    background-color:#CFCFC4;    width:100%;    border-bottom: 1px dotted gray;}
.divBody {    height:80%;    width:100%;    display:block;    padding:0;    margin:0 auto;    clear:both;    min-height:80%;    height:auto;}
.divFooter {    height:5%;    width:100%;    display:block;    margin:0 auto;    padding:0;    clear:both;}
.divContentLeft {    margin:0 auto;    float:left;    display:inline-block;    position:relative;}.divContainer {    clear:both;    display:inline-block;}
.divContentRow {    width:100%;    display:inline-block;}
.divContentHeader {    width:100%;    height:20%;    border-radius:25px;    display:inline-block;    margin:10px;    padding:5px;}
.divContentDetail {    width:100%;    height:80%;    border-radius:25px;    display:inline-block;    margin:10px;    padding:5px;}

.ui-widget-header {    background:#b39eb5;}
.divContentTextbox {    float:left;    margin-left:15px;    display:inline-block;}
.divContentLabel {    float:left;    margin-left:15px;}
* {    padding: 0;    margin-left: 0;    margin-top: 0;    margin-bottom: 0;}
.divMenuBarBlock {    float:left;    width:100%;    height:100%;}
.menu-bar {    float:left;    min-height:100%;    width:100%;    height:100%;    background: #CFCFC4;}
.menu-bar a{    display:block;    padding: 10px 10px 10px 10px;    text-decoration:none;    border-bottom: 1px dotted gray;    color: #000;    letter-spacing: .002em;    text-transform: uppercase;    font-family:Helvetica, Arial, sans-serif;    font-style:normal;    font-size:medium;}
.menu-bar li{    list-style:none;}
.menu-bar ul li ul li:hover {    background:gray;}
.menu-bar-ul ul {    display:none;}
.no-sub:hover {    background:gray;}
.sub-arrow {    margin-left:15px;}
.menu-bar-ul li.click ul {    display:block;}
.menu-bar .sub-arrow:after {    content:'\203A';    float:right;    margin-right:10px;    transform:rotate(90deg);    -webkit-transform:rotate(90deg);    -moz-transform:rotate(90deg);}
.menu-bar li.click .sub-arrow:after {    content: '\2039';}
.menu-bar-ul ul a:before {    content:'\203A';    margin-right:10px;}

<div class="wrapper">  <div class="divHeader">    <div class="divContainer">      <div class="divContentLeft">        <a href="Dashboard.aspx"><img src="../images/logo.png" /></a>      </div>      <div class="divContentLeft">        <div class="divContentRow"></div>        <div class="divContentRow"></div>
        <div class="divContentRow">          <div class="divContentLeft">            <a href="Dashboard.aspx"><span>Some Title Here</span></a>          </div>        </div>        <div class="divContentRow">          <div class="divContentLeft">            <a href="#"><img src="../images/menu_icon.png" height="20px" width="20px" onclick="" /></a>          </div>        </div>      </div>    </div>  </div>  <div class="divBody">    <div class="divContentLeft" style="min-height:100%; height:100%;">      <div class="menu-bar">        <ul class="menu-bar-ul" runat="server" id="divMenuBar">
        </ul>      </div>    </div>    <div class="divContentLeft">      <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
      </asp:ContentPlaceHolder>    </div>
  </div>  <div class="divFooter">
  </div></div>

Min-Height Does Not Work with Body