Utilize flex to position content at the bottom

Question

Utilize flex to position content at the bottom

My layout features a fixed header and footer, positioned at the top and bottom respectively. The content section in between fills the remaining space, with a scrollbar available if the content extends beyond the area.

<div id="app">
  <div id="header">
    Header
  </div>

  <div id="middle">
    Middle content
  </div>

  <div id="footer">
    Footer
  </div>
</div>

html,
body {
  height: 100%;
  overflow: hidden;
  margin: 0;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

#header {
  height: 60px;
  background-color: blue;
}

#footer {
  height: 60px;
  background-color: red;
}

#middle {
  flex: 1;
  overflow-y: scroll;
  align-items: flex-end;
}

Check out my jsfiddle here.

I'm attempting to have the content in the middle section start from the bottom rather than the top, while still retaining the overflow scrollbars for larger content. I've experimented with setting margins to 0 and exploring flex-direction, but so far no solution has worked.

css flexbox

Answer 1

Answer №1

Here is a suggested layout structure:

  <div id="header">
    Header
  </div>

  <div id="middle" class="content-end">
    Middle content
  </div>

  <div id="footer">
    Footer
  </div>
</div>

Make sure to include the following CSS in your stylesheet:

html,
body {
  height: 100%;
  overflow: hidden;
  margin: 0;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

#header {
  height: 60px;
  background-color: blue;
}

#footer {
  height: 60px;
  background-color: red;
}

#middle {
  flex: 1;
  overflow-y: scroll;
 
  display: flex;
}

.content-end
{
  display: flex;
  justify-content: start; 


}

https://i.stack.imgur.com/wYicZ.png

Answer 2

Here is a suggested layout structure:

  <div id="header">
    Header
  </div>

  <div id="middle" class="content-end">
    Middle content
  </div>

  <div id="footer">
    Footer
  </div>
</div>

Make sure to include the following CSS in your stylesheet:

html,
body {
  height: 100%;
  overflow: hidden;
  margin: 0;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

#header {
  height: 60px;
  background-color: blue;
}

#footer {
  height: 60px;
  background-color: red;
}

#middle {
  flex: 1;
  overflow-y: scroll;
 
  display: flex;
}

.content-end
{
  display: flex;
  justify-content: start; 


}

https://i.stack.imgur.com/wYicZ.png

Answer 3

Answer №2

Kindly make updates to your css with minimal changes required. Make sure to utilize appropriate HTML tags within #middle

* {
  margin: 0; padding: 0;
  box-sizing: border-box; 
}
html,
body {
  height: 100%;
  overflow: hidden; margin: 0;
}
#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
#header {
  height: 60px;
  background-color: blue;
}
#footer {
  height: 60px;
  background-color: red;
}
#middle {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding-top: calc(100vh - 180px);
}
#middle * {
  margin-bottom: 10px;
}

By implementing this method, the initial child in #middle will initiate from the bottom with the succeeding elements following suit. Feel free to experiment with the padding-top attribute.

Answer 4

Kindly make updates to your css with minimal changes required. Make sure to utilize appropriate HTML tags within #middle

* {
  margin: 0; padding: 0;
  box-sizing: border-box; 
}
html,
body {
  height: 100%;
  overflow: hidden; margin: 0;
}
#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
#header {
  height: 60px;
  background-color: blue;
}
#footer {
  height: 60px;
  background-color: red;
}
#middle {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding-top: calc(100vh - 180px);
}
#middle * {
  margin-bottom: 10px;
}

By implementing this method, the initial child in #middle will initiate from the bottom with the succeeding elements following suit. Feel free to experiment with the padding-top attribute.

Utilize flex to position content at the bottom

Answer №1

Answer №2

Similar questions

Ensuring maximum length validation on input

HTML text-indent is a way to add extra space to

Enhance the Bootstrap Sass by integrating a color scheme that seamlessly complements all elements such as backgrounds, text, and borders throughout the

What is the best method to make a hyperlink within an IFrame open in a new window?

The overlay of the background image is excessively oversized

Adjust image to fit inside a compact popup window - Implementing React.js and Bootstrap

Enhance User Experience by Making Each Background Slideshow Image Clickable

The Infinite Loop: Unveiling the En

The content has spilled over from the div and leaked into the adjacent div

The background color spills outside the column when using 100% width

Display words on screen and then alter hue using HTML and CSS

What is the best way to position a popup div in CSS?

Issues with margin and padding-top not functioning properly when using @media for printing

What is the best way to transmit the "theme" property to "Components" within a next.js application?

"Bootstrap - creating a dynamic effect with a repeating pattern overlay and vibrant background color in

Implementing the rotation of an element using 'Transform: rotate' upon loading a webpage with the help of Jquery, Javascript, and

Set restrictions on the element with a fixed position

Bootstrap Card breaking out from the confines of its parent container

Can anyone provide assistance with understanding the background-size property?

Using Selenium to choose an element based on the text of its sibling element