Ways to adjust the CSS height of a fluid body and flexible footer

In a nutshell, I'm dealing with 3 elements:

    <div>
        <Header/>
    </div>  
    <div>
        <Body/>
    </div>   
    <div>
        <Footer/>
    </div>  

The header has a fixed height.
The body is an accordion that should expand with a scroll bar when necessary.
The footer is also an accordion that can either show its full content or just the header.

My goal is to always display the header in full, allow the footer to display as needed, and have the body expand with a scroll bar as necessary.

Here are the styles I've implemented:

    Container: {
        height: '100%',
        minHeight: '100%',
        display: 'flex',
        flexDirection: 'column'
    },
    SectionContainer: {
        flex: '1',
        display: 'flex',
        flexDirection: 'column',
        position: 'relative'
    },
    bodyAccordion: {
        overflowY: 'auto'
    },
    footerAccordion: {
        position: 'absolute',
        bottom: '0px',
        right: '0px',
        left: '0px'
    }

Given the complexity of the actual HTML, here is a simplified version:

    <div className={Container}>
      <MyHeader/>
      <div className={SectionContainer}>
        <div className={bodyAccordion}>
          <MyAccordion/>
        </div>
        <div className={footerAccordion}>
          <MyFooterAccordion/>
        </div>
      </div>
    </div>

But when the code is executed, the bodyAccordion overflows into the footerAccordion instead of triggering a scrollbar.

For a visual demonstration of the issue, check out this jsFiddle: https://jsfiddle.net/jackyFrosty/mwz62bh9/2/

Answer №1

In order to properly size your container class, make sure to set a minimum height of 100vh. This is necessary because using 100% will result in the height being determined by the child elements.

Answer №2

const headerHeight = document.querySelector("header").offsetHeight;
const footerHeight = document.querySelector("footer").offsetHeight;
const contentHeight = window.innerHeight -(footerHeight + headerHeight);
document.querySelector(".content").style.height = `${contentHeight}px`;
*{
margin:0;
padding:0;
}
header{
height:100px;
  background-color:red;
}
footer{
height:50px;
  background-color:yellow;
}
.content{
  background-color:skyblue;
  width:100%;
  overflow-y:scroll;
}
.inner{
height:500px;
width:50%;
  margin:0 auto;
background-color:white;}
<header>header</header>
<div class="content">
  <div class="inner">body</div>
</div>
<footer>footer</footer>

I utilized JavaScript to determine the heights of the header and footer, allowing for precise calculation of the remaining screen height for the body content!

Answer №3

When running the code above, the bodyAccordion will overflow into the footeraccordion instead of expanding the scrollable wheel.

This issue is occurring because the footer has been assigned a position: absolute. Removing this will allow the bodyAccordion to stack over the footer.
To enable scrolling, it is recommended to limit the height of the bodyAccordion. Currently, there are no restrictions on it.
As mentioned in Sergio's response, using 100vh instead of 100% would be more suitable.

Allow the bodyAccordion to display its maximum content and then overflow into a scroll bar.

Lastly, remove flex:1. This will ensure that the bodyAccordion occupies the maximum space above the footer.

I hope this explanation proves helpful. Cheers!

Answer №4

I appreciate all the responses, I managed to resolve this by implementing the following solution:

    <div className='header'>
      <MyHeader/>
    </div>
    <div className='container'>
      <div className='content'>
        <MyContent/>
      </div>
      <footer className='footer'>
        <MyFooter/>
      </footer>
    </div>
    container: {
        position: 'relative',
        height: 'calc(100vh - 95px)',
        display: 'flex',
        flexDirection: 'column'
    },
    header: {
        height: '35px',
        width: '100%'
    },
    content: {
        overflowY: 'auto',
        flex: '1'
    },
    footer: {
        marginBottom: '0px',
        textAlign: 'left'
    }

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

"I'm perplexed as to why the console.log function is not being triggered when the button is clicked in

I'm facing an issue with a simple task - I want to log something to the console when a button is clicked, but it's not working as expected. I am utilizing the Next.js web app template by Startup Agency and can't figure out why it's not ...

The effectiveness of the javascript widget is hindered by the absence of the meta viewport tag,

As I work on creating a widget to appear at the bottom of webpages, I've encountered a styling issue. The widget's display varies based on whether the webpage includes a specified meta viewport tag or not. <meta name="viewport" content="width ...

Utilizing useNavigate in React Router Dom v6 for Redirecting to Specific Path based on Login Status

A scenario where the navigation is passed from login to useFirebase let navigate = useNavigate(); const handleLoginSubmit = (e) => { loginUser(loginData.email, loginData.password, navigate); e.preventDefault(); // alert('Lo ...

Error encountered: Module 'redux-saga/effects' declaration file not found. The file '.../redux-saga-effects-npm-proxy.cjs.js' is implicitly typed as 'any'. Error code: TS7016

<path-to-project>/client/src/sagas/index.ts TypeScript error in <path-to-project>/client/src/sagas/index.ts(1,46): Could not find a declaration file for module 'redux-saga/effects'. '<path-to-project>/client/.yarn/cache/red ...

Transforming a multi-row table into a list of dictionaries using Beautifulsoup

I'm facing an issue with converting an HTML table into a list of dictionaries. The table has limited attributes, and I need to ensure accurate parsing. Here's the relevant section: <div class="table-container"> <table> ...

Establishing the state of React hooks prior to invoking a function

Having an issue setting page = 1 prior to invoking the handleSearchClick function within resetStates. After clicking the search button, the page is not resetting to 1 on the first click but does so on the second search click. I attempted to utilize async ...

Exploring HTML and CSS backgrounds

I am new to CSS and I have a question regarding design. I want to create a form in the center of my webpage (shown as the black box) with a white background that overlaps the body background (represented by the red lines). For reference, please view this ...

What exactly is the purpose of hydrating in the Next Redux Wrapper?

I have recently delved into the world of Next.js and I find myself puzzled by the next-redux-wrapper package. Specifically, my confusion lies with the HYDRATE action. What exactly is its purpose, when does it occur, and how does it function? Currently, my ...

Troubleshooting: My Bootstrap collapse navbar refuses to cooperate

Hi there! I'm working on creating a responsive navbar with Bootstrap, but I'm having trouble getting the collapse feature to work. Can someone please assist me? Here are the lines of code I have: <nav class="navbar navbar-expand-md navba ...

Updating to the latest version of Next.js will result in a modification of the API path

I recently updated my app to the latest version of nextjs (13.1.6) and encountered a problem where all my requests are now failing. It seems that the URL I specified in the request creator, based on the ENV value, is being overwritten. .env file CONST NEXT ...

Refresh State component following fetch using Redux

Greetings everyone, I'm currently in the process of learning React and Redux. I've encountered a challenge where I am unable to update the state of a specific container using Redux without resorting to a setTimeOut function due to the asynchronou ...

What is the best way to achieve a smooth rotation effect ranging from 1° to 359° using HTML/CSS in conjunction with JavaScript

Currently, I am retrieving rotation data from a sensor and transmitting it to a webpage containing a 2D-Model that rotates based on this data. To ensure a smoother motion, I have incorporated a CSS transition. However, an issue arises when the rotation da ...

Exchange one HTML element with a different HTML element

I've been attempting to change an HTML tag using PHP or jQuery. The current default tag is: <li class="dropdown"> <a href="index.html" class="dropdown-toggle"> Home</a></li> My desired replacement for the above HTML tag is: ...

The jQuery find and replace feature is causing my entire content to be replaced instead of just specific paragraphs

Within this section, there are multiple paragraphs and an input field. The concept is simple: the user inputs text into the box, then hits "ENTER" to trigger a jquery function below. The process involves identifying matches between the paragraph content a ...

Looking to locate .zip files using PHP Simple HTML DOM Parser?

Just started using PHP Simple HTML DOM Parser and I'm attempting to display links that have either a .zip or -animal.jpg at the end, but I seem to be stuck. I've done some searching online, but unfortunately, all I see below is a blank screen. ...

Leveraging the jQuery click function to toggle elements on a webpage by referencing the current element with the keyword "this

I've been trying to implement a click event that toggles an element unrelated to the selected item's parent or child. I want to utilize "this" because there are multiple elements with the same class where I'd like to apply the same jQuery cl ...

What is the method for sending a down arrow key in Capybara?

My unique requirement involves a specialized listbox automation that would benefit from simulating a down arrow keystroke and then pressing enter. The code snippet for pressing enter looks like this: listbox_example = find(input, "listbox-example") listb ...

Error encountered while attempting to insert YouTube video with video.js player using an iFrame

I'm currently using video.js along with the vjs.youtube.js plugin to incorporate YouTube videos directly into the video.js player on my website. Everything is working smoothly and I am able to dynamically add videos to the page. However, I've en ...

Reorganize divisions using Bootstrap

I am exploring different ways to manage responsiveness through the reordering of divs. While I am aiming for a solution that is highly flexible, any suggestion would be appreciated. Desktop View: https://i.stack.imgur.com/boSOa.png Mobile View: https:// ...

The event listener for 'load' is not functioning properly within the React (Gatsby) environment

I'm having trouble with a sticky scroll parallax effect when the page initially loads at a position other than the top. I'm utilizing the react-scroll-parallax library (https://www.npmjs.com/package/react-scroll-parallax). To address this issue, ...