CSS Height Working But Min-Height Doesn't Work

CSS Height working but min-height doesn't work

Yes this is a pain but that's how it works. Height can be inherited from positioned parents but not when these have a min-height property.

Children of elements that have a min-height set to 100% cannot inherit their parent's height via percentage...

https://stackoverflow.com/a/8468131/1491212

CSS2.1 specs :

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'.

Use position: relative; height: 100% on containers to work around the problem, and add min-height: 100%; to the deepest child.

min-height:100%; height:100%; not working

The How

http://jsfiddle.net/L9GEa/

The Why

1. One might intuitively assume (as I once did) that the html element already has a determined height, but it does not (at least in this context). Luckily (or by design) this one element has the unique property of it's height being determinable when it is assigned a percentage height. That is the essential concept because in order to calculate (determine) the height of any other element which is assigned a percentage height you must also be able to determine the height of it's parent.
2. Anyone that has worked with CSS and the DOM enough likely will tell you they hate floats. This is because it pulls the element out of the flow, which requires additional work and thinking to juggle the effects. Instead use display:inline-block;vertical-align:top; with the one caveat that you will then have to add html comments around any white space between those elements.

The CSS

.maindiv {
    overflow:hidden; border:#000 1px solid;
    width:450px;min-height:250px;
    /*changes*/
    height:100%;
}
.left_inner {
    float:left; width:200px;
    min-height:100%; background:#00CC33;
    /*changes*/
    float:none;
    display:inline-block;
    vertical-align:top;
}
.right_inner {
    float:left; width:150px; background:#C93;
    /*changes*/
    float:none;
    display:inline-block;
    vertical-align:top;
}
/*changes*/
html,
body{
    height:100%;
}

The HTML

<div class="maindiv">
    <div class="left_inner">Left Block content</div><!--
    --><div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>

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>

CSS min-height not working properly

This may work:

#main{
    height : 100%;
}
#cont {
    min-height : 100%;
    /* Without the hacks */
}

Auto height doesn't work, only min-height does

Solved! I had to add exception for .front-content class, because there was only this:

.front-content{
    position: absolute;
    left: 50%;
    z-index: 5;
}

So I had to edit it for .dates block:

.front-content.dates{
    position: relative;
    z-index: 5;
  padding: 5px 10px 25px 10px;
}

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 min-height doesn't work

Absolute positioned elements are not computed in-line with other elements in the DOM. They are treated as their own floating elements. The height/width of other elements means nothing to them. Thus, you are not able to set a percentage based min-height/min-width on them. You would need to set the height/width explicitly.

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>

---

Related Topics