CODEWITHSUNDEEP
htmlcss
user4325086
user4325086

Reputation:

What's wrong with min-height?

Simple fiddle here.

Why doesn't min-height work the way you might think, and indeed not according to the documentation either?

Why doesn't this div fill up with a 100px by 100px box?

HTML:

<div class="div1"><div class="div2"></div></div>

CSS:

.div1 {
  min-height: 100px;
  width: 100px;
}

.div2 {
  height: 100%;
  width: 100%;
  background: red;
}

Why does height work and not min-height?

Upvotes: 2

Views: 147

Answers (1)

DaniP
DaniP

Reputation: 38252

The problem here is % on height for div2 not the min-height.

For Percentage Height:

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.

MDN Height

So you need a fixed value to refer from div1 or you can make div2 absolute:

.div1 {
    min-height: 100px;
    width: 100px;
    position:relative;
}

.div2 {
    position:Absolute;
    height: 100%;
    width: 100%;
    background: red;
}
<div class="div1"><div class="div2"></div></div>

Upvotes: 5

Related Questions