As a junior front-end developer, I am facing a challenge.
I have fixed header and footer areas on the page.
My goal is to set the height of the "box container" dynamically.
If the content in the box container exceeds the set height, I want it to scroll.
For example, if the total height of the device is 600px, with a 100px header and footer, I aim to set the box container's height to 400px.
The scrolling should begin once the box container surpasses the footer element.
PAGE VIEW ON PHONE (600px)
-----
HEADER (100px)
-----
BOX CONTAINER WITH SCROLL (400px with overflow scroll)
-----
FOOTER (100px)
-----
another page
-----
HEADER (100px)
-----
ANOTHER ELEMENT (200px)
SECOND BOX CONTAINER WITH SCROLL (200px overflow scroll)
-----
FOOTER (100px)
-----
This code example illustrates the structure:
<div className="App">
<header>this is header</header>
<div>.... another content....</div>
<div className="boxContainer">
<div className="box" />
<div className="box" />
...
</div>
<footer>this is footer</footer>
</div>
.boxContainer {
/* How can I achieve dynamic height? */
height: 300px; // Starting point for testing
overflow: scroll;
}
.box {
background-color: red;
width: 100%;
height: 100px;
margin: 10px 0px;
}
.box:nth-child(2n) {
background-color: blue;
}
What steps should I take next?
I considered calculating the total pixel values of the header and footer sections for each page, subtracting from the device height, then providing the box container a fixed height using inline-style. However, this approach seemed cumbersome as it required customization for every page due to possible additional elements beyond just the header and footer. I believe there might be a better solution out there.