Min-Height:100% Doesn't Work on My Container

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>

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>

Div not filling out even at min-height:100%;

When you use height: 100% for sidebar, it will be 100% of its parent component. The parent of sidebar is body so it will take the 100% height of body.

The parent of body is html, but you haven't added height for it.

First method

Add the height for html tag.

html {
height: 100%
}

Second method

Use height: 100vh for the body or sidebar to make the height of sidebar equal to the height of viewport i.e. full height of browser. In my opinion it will be better if you add it to body.

100vh means 100% of viewport height.

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

Why doesn't height: 100% work to expand divs to the screen height?

In order for a percentage value to work for height, the parent's height must be determined. The only exception is the root element <html>, which can be a percentage height. .

So, you've given all of your elements height, except for the <html>, so what you should do is add this:

html {
    height: 100%;
}

And your code should work fine.

* { padding: 0; margin: 0; }html, body, #fullheight {    min-height: 100% !important;    height: 100%;}#fullheight {    width: 250px;    background: blue;}

<div id=fullheight>  Lorem Ipsum        </div>

---

Related Topics