How do I have my inline-flex go to the bottom of my page

Question

I'm trying to find out how the flex-inline works; how do I go about having it expand height to 100% and touch the bottom of the screen, without filling it full of stuff.

html,body{margin:0;padding:0}
body{background:black;}



#sidebar{
  display: inline-flex ;
  flex-direction: column;
  border:5px solid blue;
  background:white;
  width:20%;
  text-align:center;
  list-style: none;
}

span {color:blue;
  position:relative;
}

<body>
  <div id=sidebar>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  </div>
   <span>hello</span>
</body>

Relatable to https://gyazo.com/79f9de0e2fb26d45157919249e5e2b19 you see how it goes from the top to the bottom of the page, I'm unable to do that for myself, can someone link refs on how to do it? — Trey, Aug 21 '20 at 16:31

score 0 · Answer 1 · answered Aug 21 '20 at 16:33

0

You can use the property height: 100vh. vh - view height

answered Aug 21 '20 at 16:33

Sheldon Oliveira

915
9
15

To scale it with width I guess I use vw? Also, for the stuff inside do I need to follow vh/vw or can I just use %tages. – Trey Aug 21 '20 at 16:34
a better way would be set the body with the 100vh or calc(100vh - 20px), 20px can be the size of the border or another component. And set `height: -webkit-fill-available;` or 100% for the child elements that you need. – Sheldon Oliveira Aug 21 '20 at 16:38
But I do have to use VH/VW to get what I see on the Facebook page like that's the best and most efficient way? – Trey Aug 21 '20 at 16:39
I used to do in that way, but I found a big discussion about that topic: https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window – Sheldon Oliveira Aug 21 '20 at 16:43
So are you running with vh or %? – Trey Aug 21 '20 at 16:46
vh when it has to be relative to the screen size and % when it has to be relative to the component/element size. – Sheldon Oliveira Aug 21 '20 at 16:48
Thanks, so you mostly use vh for objects such as that navbar/sidebar/ major divs on the page, and use the %'s for the stuff within the divs? – Trey Aug 21 '20 at 16:52

Priya jain · Answer 2 · 2020-08-21T17:05:45.037

The simplest way based on your current code is to use viewport units height:100vh;.

vh unit

vh was initially calculated by the current viewport of your browser. If you opened your browser and started to load a website, 1vh was equal to 1% of your screen height, minus the browser interface.

so css need to be changed by :

height: calc(100vh - 40px); as sidebar - to avoid any unnecessary scrolls

border = 20px top and bottom

html, body {
    margin:0;
    padding:0
}
body {
    background:black;
}
#sidebar {
    display: inline-flex;
    flex-direction: column;
    border:0px solid blue;
    background:white;
    width:20%;
    padding:20px;
    text-align:center;
    list-style: none;
    background:#00CCCC;
    height:calc(100vh - 40px);
}
span {
    color:blue;
    position:relative;
}

<div id=sidebar>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
</div>
<span>hello</span>

score 0 · Answer 3 · edited Aug 21 '20 at 16:57

Here I would suggest you to keep

height = 100vh - border(top + bottom) of the div (depending on flex orientation) to avoid any unnecessary scrolls when using vh.

so in this case it would be

height: calc(100vh - 10px); as sidebar border = 5px top and bottom

    html,body{margin:0;padding:0}
    body{background:black;}



    #sidebar{
      display: inline-flex ;
      height: calc(100vh - 10px);
      flex-direction: column;
      border:5px solid blue;
      background:white;
      width:20%;
      text-align:center;
      list-style: none;
    }

    span {color:blue;
      position:relative;
    }

    <body>
      <div id=sidebar>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      </div>
       <span>hello</span>
    </body>

How do I have my inline-flex go to the bottom of my page

3 Answers3