Guide to creating a scrollable container that occupies the remaining height of the screen

Looking to create a fixed container that is scrollable, while keeping the rest of the page fixed? Check out this Stackblitz example. Here's a component called "PageDefault" that includes a Header and wraps each page in the application (the content of the page is passed as the prop "children" inside PageDefault's component).

Desired layout: https://i.sstatic.net/WYrKQ.png

Minimal Example (without react):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .header {
        top: 0px;
        background-color: green;
        height: 100px;
      }

      .page-title {
        height: 300px;
        background-color: blue;
      }

      .content {
        position: fixed;
        height: 100%;
        overflow-y: scroll;
      }
    </style>
  </head>
  <body>
    <div class="header">header goes here</div>
    <div class="page-title">page title goes here</div>

    <div class="content">
      blablabla blablabla blabla bla blabla blablabla bla blabla bla blablabla
      blabla bla blabla blablabla blabla bla blabla bla bla blablabla blablabla
      blabla bla blabla bla blabla bla blabla bla blablabla blablabla blabla bla
      blabla blablabla bla blabla bla blablabla blabla bla blabla blablabla
      blabla bla blabla bla bla blablabla blablabla blabla bla blabla bla blabla
      bla blabla bla blablabla blablabla blabla bla blabla blablabla bla blabla
    </div>
  </body>
</html>

Answer №1

Utilizing Flexbox for layout:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.wrap {
  width: 90%;
  margin: auto;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  background: orange;
  padding: 1em;
}

h1 {
  background: lightblue;
  margin: 0;
}

main {
  flex: 1;
  background: pink;
  overflow: auto;
}

p {
  height: 1000px;
}
<div class="wrap">
  <header>HEADER</header>
  <h1>TITLE</h1>
  <main>
    <p></p>
  </main>
</div>

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

Arranging divs within a wrapper, ensuring that one of them displays a vertical scrollbar when the content exceeds the space available

I'm currently facing a challenge with defining the height of the description box in order to achieve the layout shown. I am trying to find a solution without relying on javascript. https://i.stack.imgur.com/3j278.png At present, the wrapper and titl ...

Expand the dimensions of the file upload field to make it taller and wider

I am trying to create a file upload field within a transparent div sized at 150px x 150px. The goal is for the file dialog box to pop up when any part of the div is clicked, allowing the user to select a file for upload. Despite my attempts, I haven't ...

Using CSS to remove the background of a dropdown button in a <select> element

I need to style a <select> element so that it appears like plain text until clicked, revealing the pulldown choices. Ideally, I would like to include small arrows to indicate multiple options, but I can add those as image overlays if necessary. My p ...

In the production build of React with Vite v5, SCSS files are not split into multiple CSS chunks

I'm struggling to enable CSS code splitting with my .scss files using Vite. It works fine in development mode, but when I try to do a production build, I only end up with one consolidated index.css file. I've searched everywhere for a solution a ...

Best practices for efficiently updating state in React components

Currently, I am in the process of learning React and trying to grasp its concepts by practicing. One exercise I decided to tackle involves deleting an element from an array when a user clicks on it in the UI. Below is the code snippet that I have been work ...

Ordering tables in jQuery with both ascending and descending options

Trying to sort a table in ascending and descending order using jQuery? Here's the JavaScript code for it. However, encountering an error: Cannot read property 'localeCompare' of undefined If you can provide guidance on how to fix this so ...

What is the best approach for managing validations on a field-by-field basis within a Formik FieldArray?

Scenario: When there are 3 participants, each participant will receive a set of questions. However, the display of each question is dependent on a list of "applied tickets" associated with the question. TLDR; I need to understand: if it's possible ...

Utilize date-fns to style your dates

Struggling to properly format a date using the date-fns library. The example date I'm trying to work with is 2021-09-20T12:12:36.166584+02:00. What am I doing wrong and what is the correct approach? Here's the code snippet I have so far: import ...

Ensure that the Map reference object is accessible when the first modal window is displayed or opened

My issue involves a table where selecting a row should display the item's location on a map using react-map-gl in a Dialog component. However, upon clicking the row, the mapref returns null during the initial render, even though it should provide mapr ...

ReactJS mixes up fetch URLs with another fetch_WRONG_FETCH

I have a fetch function in my Home component: export default function Home() { const { rootUrl } = useContext(UserContext); useEffect(() => { fetch(`${rootUrl}/api/products/featuredProducts`) .then((result) => result.json()) .then ...

What is the best way to create a responsive design that positions an element between two others?

There are two types of elements in my project: Type "A" - a text block Type "B" - a graphical block I am looking to create a responsive layout for these elements. On small resolution screens, I want them to be arranged like this: "A" "A" "B" ...

Having trouble manually sorting a React-table using useEffect

I've been experimenting with using a useEffect in react-table to manually sort columns, but I've been encountering unexpected results. I'm trying to figure out what I'm missing in my understanding. Initially, when the useEffect is trig ...

Symbol '%' is not supported in Internet Explorer

My experience with IE versions 8 and 9 has been that they do not recognize the &percnt; entity. I have tested this on two different computers. I found information suggesting that it should be supported in IE here: http://code.google.com/p/doctype/wiki ...

Should the useRouter pathname be accessed in multiple components or passed as a prop for optimal Next.js performance?

Imagine a scenario where there is a Layout containing NavMobile and NavDtop components, each displaying based on screen size. In order to disable the link to the current page, both components require the current pathname from next/router. const router = us ...

How to implement a select all feature using React and MaterialUI

I am facing a challenge with managing multiple sets of checkboxes independently along with a toggle that can switch them all on or off within their respective groups. Each checkbox has two states, and I can identify the checkbox being clicked using event.t ...

Adapt the CSS based on different screen sizes

I am currently developing a mobile application using angularjs and the ionic framework. My application is intended for both tablet and mobile versions. I have encountered an issue where I cannot use the same CSS for both the tablet and mobile versions. Is ...

Can JavaScript be utilized to retrieve the MAC address?

Is it possible to retrieve the Mac addresses of a system for login using JavaScript? ...

Tips for creating multiple popups using a single line of JavaScript code

I am new to JavaScript and I am attempting to create a popup. However, I am facing an issue in opening two divs with a single line of JavaScript code. Only one div opens while the other remains closed despite trying various solutions found on this website. ...

Creating a Form with Table-like Alignment Using Div Tags

Take a look at my code: <div> <label>First Name</label><input type="text" id='first_name'/><br /> <label>Last Name</label><input type="text" id='last_name'/><br /> <l ...

Tips for decreasing volume in react.js and node.js

React.js Challenge: I am facing difficulty reducing the quantity in my React code. What I want is for the quantity to decrease by 1 when a button is clicked. Here is a snippet of my React code: const [quantity, setQuantity] = useState(0) const handleDeliv ...