Expand div to fill entire screen vertically

Question

My goal is to exapand sidebar__container to fill the entire vertible height of the screen. However, it seems to only be expanding to about 30% of the screen height.

I tried to use flex: 1 but that doesn't seem to make it work. Here is my code:

function Sidebar() {
  return (
    <div className="sidebar">
      <div className="sidebar__container">
        <div className="sidebar__optionContainer">
          <Link to="/dashboard">
            <SidebarOption Icon={HomeIcon} text="Dashboard" />
          </Link>
          <h6>Appearance</h6>
          <Link to="/themes">
            <SidebarOption Icon={TokensIcon} text="Themes" />
          </Link>
          <Link to="/themes">
            <SidebarOption Icon={LayersIcon} text="Gallery" />
          </Link>
        </div>
        <div className="sidebar__optionContainer">
          <h1>Help</h1>
        </div>
      </div>
    </div>
  );
}

And here is my css code:


.sidebar__container {
  padding: 0px 20px;
  padding-top: 20px;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

Does this answer your question? [How to make a div 100% height of the browser window](https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window) — T04435, Nov 26 '20 at 05:43

score 2 · Answer 1 · answered Nov 26 '20 at 01:03

2

You can set the height to be 100% of the viewport height:

height: 100vh;

answered Nov 26 '20 at 01:03

Nelson Camilo Orduz

31
4

score 1 · Answer 2 · answered Nov 26 '20 at 00:22

You height:100% as you can see here in a sample code. It will automatically extend the height depends the height of your browser.

.wrapper {height:700px;margin:0 auto;padding:0;max-width:1200px;width:100%;}
.height {height:100%;display:block;padding:2rem;text-align:center;width:400px;background:red;}

<div class="wrapper">
<div class="height">
sample
</div>
</div>

Expand div to fill entire screen vertically

2 Answers2