How to create a div up to the bottom of the site?

Question

I have a element, which has a colored background, and starts after an header. When I set the height to 100%, the element reaches over the bottom so a scrollbar appears. I want it to reach to the bottom but not further. The code should explain it a bit, the red is the div I want to not go further than the bottom. Is there a possible way to do this? I can use JavaScript, html, css, etc...

html,body {
    height: 100%;
    background-color: green;
}
#text{
    height: 100%;
    background: #ff0000;
    margin-left: 20%;
}
header{
  background-color: black;
  color: white;
  padding: 16px;
}

<header>My Header</header>
<div id = "text">
    test
</div>

What is wrong with your fiddle ? div seems to work correctly — MaxiGui, Oct 23 '20 at 14:06
please don't ignore the rules of SO - [something on my website doesn't work, can I just paste a link to it?](https://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it) — Pete, Oct 23 '20 at 14:06

score 0 · Accepted Answer · answered Oct 23 '20 at 14:12

You can set flex display layout on html, body tags and set flex: 1 1 auto to main #text div so that it will get the rest size except header.

html,body {
    height: 100%;
    background-color: green;
    display: flex;
    flex-direction: column;
}

#text{
    height: 100%;
    background: #ff0000;
    margin-left: 20%;
    
    flex: 1 1 auto;
}
header{
  background-color: black;
  color: white;
  padding: 16px;
}

<header>My Header</header>
<div id = "text">
    test
</div>

score 0 · Answer 2 · answered Oct 23 '20 at 14:12

0

You can use display: flex; to achieve what you want

html,body {
    height: 100vh;
    background-color: green;
    margin: 0;
    padding: 0;
}
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
#text{
    height: 100%;
    background: #ff0000;
    margin-left: 20%;
}
header{
  background-color: black;
  color: white;
  padding: 16px;
}

<header>My Header</header>
<div id = "text">
    test
</div>

answered Oct 23 '20 at 14:12

Francisco

1,748
1
17
19

1

Yours works fine also! – LoahL Oct 23 '20 at 14:18

How to create a div up to the bottom of the site?

2 Answers2