how to make div extend to bottom of screen

Question

div {
  background-color: #bada55;
  width: 475px;
  float: left;
  margin-left: 30px;
  height: 100%;
}

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

<div>
</div>

I have a div I want to extend to bottom of screen. I'm not sure why but this is not working for me:

div {
    background-color: #bada55;
    width: 475px;
    float: left;
    margin-left: 30px;
    height: 100%;
} 


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

Seems to work fine for me? What are you seeing on your end? Can you post a screenshot? — AStombaugh, May 22 '22 at 11:38

score 0 · Answer 1 · answered May 22 '22 at 11:41

0

Use this

html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
}

answered May 22 '22 at 11:41

Dinujaya Sandaruwan

50
6

score 0 · Answer 2 · answered May 22 '22 at 15:04

initialize margin & padding like *{margin: 0px; padding: 0px;}

div {
  background-color: #bada55;
  width: 475px;
  float: left;
  margin-left: 30px;
  height: 100%;
}

html,
body {
  height: 100%;
  min-height: 100%;
     
}
 *{
  margin: 0px;
    padding: 0px;
    }

<div>
</div>

how to make div extend to bottom of screen

2 Answers2