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.

cssflexbox

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

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

`Jump-start Your Development with jQuery Lightbox Centering`

Recently, I implemented a lightbox effect for images on my website. However, I encountered an issue where the lightbox was not centering properly in the window upon initial click. Instead, the lightbox would appear at the bottom of the page on the first cl ...

javascriptjqueryhtmlcssjquery-ui

Customize the appearance of buttons and tabs located in the header section

Front end development is new to me and I'm trying to learn, but I've hit a roadblock. I have 4 components - 2 buttons and 2 tabs that I want to style in a header at the top of the page. Specifically, I want one button on the top left with padding ...

jqueryhtmlcssangularjs

Unable to eliminate italicized text within collapsible content

Despite having no programming experience, I am attempting to create a FAQ section for our help site using collapsible sections for the Q&A. While I've managed to achieve most of what I wanted, there is one element that stubbornly refuses to change. De ...

htmlcss

What is the best way to modify the text color in an MUI Text Field?

I'm completely new to using MUI and React, and I've run into an issue with changing the text color in my input field. Even though I specified inputProps={{sx: { color: "CCCCCC" }}}, the text color remains black while the label and searc ...

cssreactjsmaterial-ui

How can we assign various class names depending on the value of an object?

I have a set of objects stored in my component. I need to dynamically apply different classes based on the value of the ErrorLevel property within each object. If an object has ErrorLevel equal to 1, I want to assign the following classes to various elemen ...

cssangularsass

Limiting the height of a grid item in MaterialUI to be no taller than another grid item

How can I create a grid with 4 items where the fourth item is taller than the others, determining the overall height of the grid? Is it possible to limit the height of the fourth item (h4) to match the height of the first item (h1) so that h4 = Grid height ...

csstypescriptmaterial-uicss-grid

When you add the /deep/ selector in an Angular 4 component's CSS, it applies the same style to other components. Looking for a fix?

Note: I am using css with Angular 4, not scss. To clarify further, In my number.component.css file, I have: /deep/ .mat-drawer-content{ height:100vh; } Other component.css files do not have the .mat-drawer-content class, but it is common to all views ...

htmlcssangularjsangularangular-material2

Toggle the visibility of HTML elements by utilizing a JavaScript checkbox event

I have put together these JavaScript functions to hide the delivery address fields on my shopping cart address form if the goods are being sent to the billing address. The functions control the visibility of the HTML wrapped by... function getItem(id) { ...

javascriptcsscheckbox

TailwindCSS: Footer component overlaps central panel when scrolling on mobile devices

https://play.tailwindcss.com/notWWuhDpr?size=546x752 My project consists of three key components: The header A scrollable main panel The footer While it was relatively easy to implement this layout on the web using the code provided in the link above, I ...

csstailwind-css

Failure to link style sheet to document

Experiencing some difficulties with a seemingly simple task that I can't figure out. When I check my code in the browser, none of my styles are being applied to the HTML elements. The style sheet is located in the same folder as the main document, and ...

htmlcss

Utilizing the Strength of Code Snippets and the Art of Style Sheet Separation

When it comes to developing beautiful web pages and forms from scratch, I often struggle as the end result tends to be quite unappealing. Luckily, there are numerous CSS code snippets available that offer stunning solutions. Currently, I am delving into py ...

htmlcssdjangostylesheetcode-snippets

What measures can be taken to stop LESS partials from compiling independently?

When working with LESS, I utilize partials that are included (@include) into the main LESS stylesheet. A common issue I face is that each partial ends up compiling to its own CSS file, leading to project clutter. In SASS, if a file is named with an unders ...

csslessphpstorm

"Eliminating the visual feedback frame from your Samsung Galaxy browser: A step-by-step

After clicking a link, a dark orange frame is displayed around it. This frame can sometimes persist until the next scroll or screen touch. Similarly, when other elements are clicked, an orange frame may appear, adjusting in size to reflect the element cli ...

androidhtmlcssbrowsersamsung-mobile

Setting the margin to 0 auto to create a CSS Grid layout featuring an Image taking up the entire right side

I’ve been grappling with finding a consistent method to ensure uniform white space for all containers like this: https://i.stack.imgur.com/wtk0G.png Important: The grey rectangle signifies an image. My goal is for it to extend to the viewport's en ...

cssgridcss-grid

Height that is determined in real-time

I am attempting to adjust the height of a div based on the size of the screen. Within this div, there is a calendar that contains multiple lines of content, which can be displayed or hidden based on user preference. The height of the calendar is not fixed, ...

css

What is the best way to align text in the center of a div?

I just created this dropdown menu, but I am encountering an issue. Whenever I resize the div or h4 element, the text ends up at the top. Even after trying to solve it with text-align: center;, the problem persists. Here is a visual representation of what ...

javascripthtmlcss

Center aligning elements in React using CSS with HTML can be achieved through Flexbox. However, sometimes images

Currently, I'm in the process of developing a website with react and I've encountered an issue with centering elements vertically on the left and right sides. It's been troubling me for a few days now and I haven't found a solution yet. ...

htmlcssreactjsflexbox

Creating a responsive and expandable table using HTML and JavaScript

I need help with making my html table resizable in a vertical direction. The cells can overflow if there isn't enough space, so I want to allow users to stretch the table by dragging and extending the bottom edge. Can anyone provide guidance on how to ...

javascriptjqueryhtmlcss

Embedding a picture logo within a CSS-designed content box

I am trying to create a unique layout for my website that reveals content using labelled radio buttons, without the use of scripts. Instead of using <a href='#'>, I want to achieve a specific layout like the one shown in this example. When ...

htmlcsstabs

Interactive hover effect in JavaScript displays a larger version of other thumbnails when hovering over a dynamically loaded thumbnail image, instead of its own full-size image

I recently began teaching myself PHP and Dreamweaver with the help of a video tutorial on building data-driven websites using Dreamweaver. My goal is to create a dynamic table with 6 columns and 20 rows. column1 | column2 | column3 | colu ...

phphtmlcssjavascriptmysql