Why is height: 100% and width 100% not working

Question

I want to make the background-color for a DIV not body light gray and another div inside it dark gray. I tried the following:

.div1 {
    min-height: 100%;
    min-width: 100%;
    background-color: lightblue;
}

.div2 {

    background: black;
}

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

Which div do you want to be 100%? And have you tried adding `position: absolute;` to `.div1`? — John, May 13 '20 at 01:05

score 0 · Accepted Answer · answered May 13 '20 at 01:05

You need to set the html and body dimensions.

html,body {
  height: 100%;
  width: 100%;
}

updated code:

html,body {
  height: 100%;
  width: 100%;
}

.div1 {
    min-height: 100%;
    min-width: 100%;
    background-color: lightblue;
}

.div2 {

    background: black;
}

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

Why is height: 100% and width 100% not working

1 Answers1