What is the best way to position my inline-flex element at the bottom of the page?

Question

What is the best way to position my inline-flex element at the bottom of the page?

I'm trying to understand how flex-inline works. I want to make the height expand to 100% and reach the bottom of the screen without overcrowding it with content.

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>

css

Answer 1

Answer №1

One way to adjust the height is by setting it to height: 100vh. The unit vh stands for viewport height.

Answer 2

One way to adjust the height is by setting it to height: 100vh. The unit vh stands for viewport height.

Answer 3

Answer №2

My suggestion here is to maintain the

height = 100vh - border(top + bottom) of the div

(based on flex orientation) to prevent unnecessary scrolling when utilizing vh.

Therefore, in this scenario, it would be

height: calc(100vh - 10px); as

sidebar border equals 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>

Answer 4

My suggestion here is to maintain the

height = 100vh - border(top + bottom) of the div

(based on flex orientation) to prevent unnecessary scrolling when utilizing vh.

Therefore, in this scenario, it would be

height: calc(100vh - 10px); as

sidebar border equals 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>

Answer 5

Answer №3

To simplify your current code, you can utilize viewport units for the height using height:100vh;.

Understanding vh unit

The vh unit is initially based on the viewport size of your browser. When a website is loaded in your browser, 1vh equates to 1% of your screen height, excluding the browser interface.

Therefore, to adjust the CSS appropriately:

Set the height to be equal to:

height: calc(100vh - 40px); // to prevent unnecessary scrolling in the sidebar

This accounts for a 20px border both at the 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>

Answer 6

To simplify your current code, you can utilize viewport units for the height using height:100vh;.

Understanding vh unit

The vh unit is initially based on the viewport size of your browser. When a website is loaded in your browser, 1vh equates to 1% of your screen height, excluding the browser interface.

Therefore, to adjust the CSS appropriately:

Set the height to be equal to:

height: calc(100vh - 40px); // to prevent unnecessary scrolling in the sidebar

This accounts for a 20px border both at the 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>

What is the best way to position my inline-flex element at the bottom of the page?

Answer №1

Answer №2

Answer №3

Similar questions

Ways to create distance between columns in Bootstrap 5

Stack div in a vertical orientation

Bootstrap's inline form features a button on a separate line from the rest of the form

What is the proper way to justify text alignment in HTML?

Discover the steps to dynamically alter the inclusion of the Bootstrap CSS file within an Angular project

Using CSS backdrop-filter to create a unique blurred border effect for your web elements

I am struggling to decide which attribute to use for implementing image swap on mouseover() and mouseout()

The footer is supposed to be at the bottom, but unfortunately, the clear float isn

Use jQuery to swap out every nth class name in the code

Alter the typography of the text that has been enhanced by Google

What is the best method for eliminating tiny spaces between images that are aligned horizontally?

Building an easy-to-use jQuery task list

Contrasting Firefox Experience on Mac and Windows

What is the best way to set up a dropdown menu in a data grid where the width matches the fields?

Tips for creating a responsive HTML5 form

Continuously update the content within a paragraph using jQuery

Using a jQuery event to apply styles with CSS

Using Crawler4j, Jsoup, and JavaScript to retrieve modified attribute values

the box is having trouble with its animation

Modifying CSS styles in JavaScript based on the user's browser restrictions