Header and Footer with auto-sizing Body that scrolls

My structure consists of a Header, Body, and Footer

<div id="my-element">
  <div id="header">...</div>
  <div id="body">
    ...
  </div>
  <div id="footer">...</div>
</div>

Currently, the element with the ID #my-element is limited to the height of the browser window. The elements with IDs #header and #footer can have varying heights but should not be scrollable. Only the element with the ID #body is allowed to be scrollable, which happens when the combined heights of all three elements exceed that of #my-element. In such cases, only the #body element will display a scrollbar.

I believe there may be a simple solution using flexbox, but since I am not familiar with that property, I have not been able to find one yet.

htmlcssflexbox

Answer №1

It seems like there might be a simple solution using flexbox

And you're absolutely right!

/* Here are the key points: */
body {margin:0}
#my-element {
  display: flex;
  flex-direction: column;
  max-height: 100vh
}
#header, #footer {flex-shrink: 0}
#body { overflow-y: scroll }

/* Just so you can see it in action: */
#header,
#body,
#footer {
  border: 1px solid
}
<div id="my-element">
  <div id="header">HEADER<br>HEADER</div>
  <div id="body">
   BODY<br>BODY<br>BODY<br>BODY<br>BODY<br>BODY<br>BODY<br>
   BODY<br>BODY<br>BODY<br>BODY<br>BODY<br>BODY<br>BODY<br>
   BODY<br>BODY<br>BODY<br>BODY<br>BODY<br>BODY<br>BODY<br>
  </div>
  <div id="footer">FOOTER</div>
</div>

This is my favorite flexbox cheatsheet; it's much simpler than traditional layouts in most cases:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

Creating a dynamic menu layout using CSS

I've experimented with various methods to create a fluid menu, but none have been successful. Currently, I have an interactive menu that sometimes displays 6 items and other times 7 items. When I have 7 items, the menu aligns perfectly across the wid ...

htmlcss

Ensure that the card header in Bootstrap CSS is consistently displayed at a height of two lines

I am currently developing a webpage using Angular, where bootstrap cards are generated dynamically. The code snippet for this looks like the following: <div class="row"> <div class="card border-primary p-0 mb-2 col-md-4 col-sm-6 colxs-12" *ng ...

csstwitter-bootstrapbootstrap-4

Switching iFrame based on dropdown selection

Hello, I'm a beginner in the world of programming and I'm currently experimenting with creating a webpage. However, I've encountered a roadblock and could use some help. My current goal is to change the source of an iFrame to a specific link ...

javascripthtmlbootstrap-4

Verify the placement within the text box

Are there methods available in JavaScript or any JavaScript framework to determine the position within a textbox? For example, being able to identify that figure 1 is at position 2 and figure 3 is at position 3. Figure 1 Figure 2 ...

javascriptjqueryhtml

Make the element switch from hidden to visible when hovering over it using CSS

I had a challenge to only show some rating text on my website when I hovered over it. Being new to coding with CSS and JavaScript, I was experimenting with overriding styles using the Stylebot extension in Chrome. I encountered an issue while trying to mo ...

javascripthtmlcss

Having trouble with loading a 3D gltf model on A-frame.io?

I'm experiencing some difficulties when attempting to load a gltf model onto an a-frame. Unfortunately, the model does not appear to be loading properly. Here is the code snippet in question: <html> <head> <title>Tree model</t ...

html3daframegltf3d-model

Having difficulty setting up multiple buttons to share the same function in jQuery using HTML

After clicking a button, my code dynamically adds content to a div and inserts buttons with names like "teamReq_"+index+"_AddYear" into the document (where index is a number retrieved from a hidden input field). If these buttons are spammed, multiple divs ...

javascripthtml

Extracting information from an external website in the form of XML data

Trying to retrieve data from an XML feed on a remote website , I encountered issues parsing the XML content and kept receiving errors. Surprisingly, fetching JSON data from the same source at worked perfectly. The code snippet used for XML parsing is as f ...

javascriptjqueryhtmlxmlajax

Is it possible to simultaneously run multiple functions with event listeners on a canvas?

I'm attempting to create a canvas function that displays the real-time mouse cursor location within the canvas and, upon clicking, should draw a circle. I came across this code snippet that reveals the x and y coordinates of the mouse: document.addEve ...

javascripthtmlhtml5-canvasdom-events

Simply drag your files onto the form for quick and easy uploading upon submission

Would like to know how to enable drag-and-drop file selection for uploading files synchronously upon form submission. Understanding the basics of file uploading using HTML and PHP, I am seeking a way to process these files in PHP along with those in the $_ ...

phpjqueryhtmluploaddrag-and-drop

Ways to deactivate a button using CSS

I need to use Javascript to disable a link based on its id. By default, the link is invisible. I will only enable the link when the specific id value comes from the backend. HTML <li id="viewroleId" style="display: none;"> <a href="viewrole" ...

javascripthtmlcssangularjs

How can I display two slides at once in Ionic 2/3 on a wide screen?

I have been searching for a solution that will allow me to display 1 ion-slide if the device screen is small, but if it's larger, then I want to display 2 ion-slides. Unfortunately, I have not been able to find a suitable solution yet. As an example, ...

javascripthtmltypescriptionic2ionic3

The div container is not expanding to full width on mobile screens when using Next.js and Tailwind CSS

My goal is to make my div stretch or go full width similar to the table on my page. I have experimented with max-w-full, w-screen, and w-full, but the div is not extending all the way... https://i.stack.imgur.com/8BJnI.png This is the code for my page. ...

htmlcssnext.jstailwind-cssresponsive

Modify the appearance of the PrimeReact navigation bar

I am struggling to change the background color of the navbar in my PrimeReact application. I have tried adding CSS styling in various places, but nothing seems to work. All I want is to customize the background color while keeping the default PrimeReact ...

cssreactjsfrontendstylingprimereact

Create space in the bootstrap framework between an image and text

I'm trying to increase the space between the title/description and the icon image in my Bootstrap CSS layout. I attempted adding ms-5 to the div tag, but it didn't have the desired effect. NOTE: Please refrain from suggesting margin-right:5px as ...

htmlcssbootstrap-5

Toggle the visibility of 2 Form Fields by checking the Checkbox

Hi, I am trying to display two form fields when a checkbox is selected. These fields are required, so they should only be displayed when the checkbox is checked and should be mandatory. However, I am facing issues with hiding the fields when the checkbox i ...

jqueryhtmlformsshow-hiderequired

Adjusting the size of icons to fit within a container

I need a div that can display up to 7 icons, depending on certain selections. These icons are from ionicons library. Here is the current code snippet: <div class="item item-text-wrap" style="text-align:center;"> <button class="button" style=" ...

javascripthtmlcssionic-framework

"Maintaining Consistency: Ensuring The First Row is Repeated on Every

When trying to save a PDF using jspdf, I encountered an issue with tables in my HTML. The tables do not have headers, but JsPDF is automatically repeating the first row of the table on every page, causing overlap. I don't want headers on every new pag ...

javascriptangularjshtml

"Present a continuous sequence of images in HTML to create a dynamic video-like experience

A PHP file has been created to extract images from a MySQL database and display them as a sequence of images that update every half second. Using the setInterval method in JavaScript, the page is refreshed every half second to display a new picture. $(doc ...

javascriptphphtmlcssvideo-streaming

Troubles with aligning a figure in Bootstrap 4

I am in the process of updating my website layout from an old version marked by Old HTML, which can be found at JFiddle: https://jsfiddle.net/LybeppL3/11/ The new version I am working on, known as Current Code: https://jsfiddle.net/5c2sm9s1/23/ OR at Pree ...

htmlcsstwitter-bootstrapbootstrap-4