When the maximum height reaches 100%, it surpasses the limit set by the viewport height

I'm looking to create a fixed footer at the bottom of my page, where the contents adjust based on the view height.

Recommended: Check out this CodePen for an example with a well-contained layout. You'll notice that even as the menu items increase, the footer remains within its designated space.

Avoid: This other CodePen has content overflowing outside the viewport, requiring users to scroll down to access the footer.

Any suggestions for CSS modifications to fix the issues in the second CodePen?

As StackOverflow requires code snippets, here are the HTML and CSS codes for each CodePen:

Working HTML:

<div class="container">
  <div class="nav">
    <h1>Top Nav Bar</h1>
  </div>
  <div class="sidebar">
    <h2>Menu</h2>
    <ul>
      // List of menu items...
    </ul>
  </div>
  <div class="main">
    <p>Hello World</p>
  </div>
  <div class="footer">This is the footer</div>
</div>

Correct CSS:

body,html{ margin: 0; padding: 0; }
*{ margin: 0; padding: 0; box-sizing: border-box; }
.container{ display: grid; height: 100vh; border: 3px solid red;
  grid-template-areas: "nav     nav"
                        "sidebar main"
                        "footer  footer";
  grid-template-rows: auto
                      1fr
                      auto;
  grid-template-columns: 200px 1fr; }
.nav{ grid-area: nav; border-bottom: 1px solid #AAA; }
.sidebar{ grid-area: sidebar; border-right: 1px solid #AAA; max-height: 100%; overflow-y: scroll; }
.footer{ grid-area: footer;  text-align: center; background-color: lightgreen; }

Problematic HTML:

<div class="container">
  <div class="nav">
    <h1>Top Nav Bar</h1>
  </div>
  <div class="sidebar">
    <h2>Menu</h2>
    <ul>
      // Incomplete list of items...
    </ul>
  </div>
  <div class="main">
    // Large amount of content without proper structure...
  </div>
  <div class="footer">This is the footer</div>
</div>

Incorrect CSS:

body,html{ margin: 0; padding: 0; }
*{ margin: 0; padding: 0; box-sizing: border-box; }
.container{ display: grid; height: 100vh; border: 3px solid red;
  grid-template-areas: "nav     nav"
                        "sidebar main"
                        "footer  footer";
  grid-template-rows: auto
                      1fr
                      auto;
  grid-template-columns: 200px 1fr; }
.nav{ grid-area: nav; border-bottom: 1px solid #AAA; }
.sidebar{ grid-area: sidebar; border-right: 1px solid #AAA; }
.footer{ grid-area: footer;  text-align: center; background-color: lightgreen; }
.main{ grid-area: main;  display: grid;
  grid-template-areas: "main-main";
  grid-template-rows: 1fr
                      auto }
.main-main{ grid-area: main-main;  display: grid; border-top: 1px solid #AAA;
  grid-template-areas: "area-left area-right";
  grid-template-columns: 200px 1fr; max-height: 100%; overflow-y: auto; }
.area-left{ grid-area: area-left;  // Issues with scrolling...
.area-right{ grid-area: area-right;  // Problems with content overflow...

Answer №1

If you're looking for the updated version of the faulty CSS code, you can find it here.

body,html{ margin: 0; padding: 0; }
*{ margin: 0; padding: 0; box-sizing: border-box; }
.container{ display: grid; height: 100vh; border: 3px solid red;
  grid-template-areas: "nav     nav"
                        "sidebar main"
                        "footer  footer";
  grid-template-rows: auto
                      1fr
                      auto;
  grid-template-columns: 200px 1fr; }
.nav{ grid-area: nav; border-bottom: 1px solid #AAA; }
.sidebar{ grid-area: sidebar; border-right: 1px solid #AAA; }
.footer{ grid-area: footer;  text-align: center; background-color: lightgreen; }
.main{ grid-area: main;  display: grid;
  grid-template-areas: "main-main";
  grid-template-rows: 1fr
                      auto;
max-height: 100%; overflow-y: auto;}
.main-main{ grid-area: main-main;  display: grid; border-top: 1px solid #AAA;
  grid-template-areas: "area-left area-right";
  grid-template-columns: 200px 1fr;  }
.area-left{ grid-area: area-left;  max-height: 100%; overflow-y: scroll; }
.area-right{ grid-area: area-right;  max-height: 100%; overflow-y: scroll; }

The adjustment was made to correct the CSS by swapping the 'max-height' and 'overflow' properties in the 'main' container instead of 'main-main'.

Answer №2

If you want to make the content scrollable, don't forget to include overflow-y: scroll; and a semicolon within the grid-template-rows property of the .main class. It may seem like just two lines of code, but it can take some time to figure out :)), check out the complete version of the .main class here: https://codepen.io/loia5tqd001/pen/RwNoQEB

  .main {
    grid-area: main;
    display: grid;
    grid-template-areas: 'main-main';
    grid-template-rows: 1fr auto; /* You can also delete this line because there's only one child element */
    overflow-y: scroll;
  }

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

overlay the text at the top of a div

Looking to create an overlapping effect with text in a div, similar to the example shown in the image. I am currently utilizing Bootstrap, but open to using CSS as well. However, I need the text to go slightly underneath the overlapping element. View the ...

Bottom-aligning text in Tailwind CSS

Creating two <p> tags to store text: <p v-if="my_property <= 0" class="text-green-500 text-lg font-bold">{{Math.abs(my_value)}}%</p> <p v-else class="text-red-500 text-lg font-bold">{{my_value}}%< ...

How can we determine if the user is on a small device and utilizing flexbox with col-sm?

Is there a method to detect when the user is on a small device? I'm looking to adjust my navigation menu based on the size of the device, similar to the col-sm functionality. ...

Emphasize x-axis heading in a Highcharts graph

In my Highcharts bar graph, I am looking for a way to dynamically highlight the x-axis label of a specific bar based on an external event trigger. This event is not a standard click interaction within the Highcharts graph. Currently, I have been able to r ...

Hover Effect for Bootstrap Gallery

I've created a hover effect for my gallery that is embedded in a Bootstrap Grid. Although the hover effect itself works fine, on some screen sizes, the overlay ends up covering the gallery images. Does anyone have any ideas, solutions, or hints to so ...

What steps can I take to ensure my CSS selector for the element is functioning properly?

Here is an example of some code: <html> <head> <style> .test{ background-color: red; p { background-color: yellow; } } </style> </head> <body> <div class="test"> ...

Uncovering classes and selectors in CSS files that match an element with JavaScript

Trying to explain my idea with an example since it's a bit tricky. Imagine we have this HTML code: <ul> <li id="myli" class="myclass">Hello</li> </ul> along with the corresponding CSS: .myclass{ color:red; } li.m ...

Set styles to child elements of an external component using styled-components

In my Component.tsx file, I am using the following template: import {Foo} from 'external-stuff' <Foo> <p>bar</p> </Foo> The Foo component is designed to accept a className parameter. const Foo = ({className, title}) =& ...

CSS linking causing pages to crumble

Out of nowhere, while working on my project today, my page suddenly collapsed. It was a frustrating sight to see. Immediately, I went back to Dreamweaver and used cmd+z to undo a few steps, but there was no visible issue. Despite this, my page continued t ...

The CSS background image doesn't appear on my personal device

I am having trouble using a local image as the background image for a section of my website. Even after entering the image URL and running the project, nothing is appearing. As a beginner in CSS and HTML, I would greatly appreciate any help or advice on ho ...

Is there a way to adjust the font color when the expiration date passes?

My goal is to change the color of text to green when the expiration date has not been reached yet. If the expiration date has passed, then the text should be red. .curentDate { color: rgb(54, 168, 54) } .expirationDate{ color: red; } <div cl ...

What causes the preview pane in an embedded Stackblitz project to not show up?

I've been attempting to integrate Stackblitz projects into my Angular application. The project editor pane displays correctly, but the preview pane is not showing the preview. Instead, it's showing an error message that reads: Error occurred: Err ...

What is the best way to expand and collapse a mat-expansion-panel using a button click

Is it possible to expand a specific mat-expansion-panel by clicking an external button? I've attempted linking to the ID of the panel, but haven't had any luck... <mat-expansion-panel id="panel1"> ... </> ... <button (click)="doc ...

Difficulty in updating Vue variable value following a request

Hello everyone, I am facing an issue regarding a variable value. Within the request, I am comparing each array value to see if there is a match and then updating the match variable to true if a match is found. However, the problem arises when the updated ...

Exploring anchor navigation with the help of the <a> tag within a React component

I am currently working on implementing anchor navigation within one of the page components in my React app. My goal is to achieve a similar functionality as demonstrated here in draft.js, where subheaders are used as anchors with a link icon next to them, ...

What is the method for aligning navbar items to the right in Bootstrap 4?

I'm new to Bootstrap and I have a question about aligning navbar items to the right in Bootstrap 4. I've tried the solutions provided in this article Bootstrap 4 - Right Align Navbar Items, but they didn't work for me. I'm trying to un ...

The dropdown menu in Bootstrap is malfunctioning despite the up and down arrow keys working properly

I've been attempting to create a basic dropdown menu using Bootstrap dropdown, and so far, it's been working perfectly in most instances. However, on certain pages, when I click on the three dots that are supposed to activate the dropdown, nothin ...

What is the most effective method for locating and capturing a specific element (such as an input box) in Python Selenium using either Xpath or CSS selector

I am currently using selenium to scrape a website, primarily relying on xpath or CSS selectors to extract elements. However, I have noticed that these selectors are dynamic, which contradicts what I have read online about CSS selectors being stable. As a b ...

Disconnect the parent when the child is clicked in CSS

I am struggling to find a solution for this issue. Currently, I have a hover effect where when I click on a submenu li item, the parent li also gets highlighted. You can see the behavior in the image below: https://i.sstatic.net/Ie6Lb.png Is there any w ...

Arranging my form input fields in a neat vertical stack

@gnagy @Satwik Nadkarny I appreciate the help you both provided, and I wish I could give a plus to your responses (requires 15 rep sadly), but I have encountered another issue. After the first two text input fields, I added an additional input field for e ...