Set the height of the element to cover the entire page

Utilizing material-ui components for the design of my web page. I have grid elements that load based on random menu selections: https://i.sstatic.net/a1Ln5.png

The yellow grid represents the menu, with options 1, 2, and 3 available. Each option leads to a different page (URL), but the menu remains consistent across all pages. The height of each page varies - for instance, option 1 has a small height in the example provided. However, option 2 is much longer, stretching beyond 100vh. Despite setting the menu's (yellow grid) height to 100vh, it appears too short when option 2 is selected: https://i.sstatic.net/SgQAC.png

As shown by the red lines indicating the bottom of the menu. How can I ensure that the menu fills the entire page even when the height exceeds 100vh, as height: "100vh" only works for smaller pages?

htmlcsssassmaterial-uimaterial-design

Answer №1

Set the height to 100%

Alternatively, you can utilize flexbox to achieve the following structure:

<div class="whole-page">
  <div class="sidebar">
  </div>
  <div class="content">
  </div>
</div>

.whole-page {
  display: flex;
}

Check out this example on CodePen for reference

This setup will automatically adjust to full height

Answer №2

Consider incorporating the 100% height attribute to the CSS of your yellow section...

.sidebar {
  height: 100%;
  --
  --
}

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

Ways to display dynamic content within a div using Bootstrap's vertical tab through a click event in PHP

I have been working on displaying static content in a div using Bootstrap vertical tabs, similar to this: Link: However, I am facing an issue with showing dynamic content in a div using a Bootstrap vertical tab through a PHP click event. I have been try ...

phpjqueryhtmlcsstwitter-bootstrap

How to integrate half-star ratings in Ionic

Recently, I have been struggling with implementing half stars in the rating module of my Ionic mobile application. When the average rating is not a whole number, I opted to round it off and display an Ionic icon star. Below are snippets of the code I curre ...

cssangularjstypescriptionic-frameworkionic2

Obtaining values from alternating nodes in a SQL query

Can anyone help with extracting values of odd and even nodes in SQL from this XML example? declare @htmlXML xml = N'<div class="screen_specs_container "><div class="left_specs_container">Compatibility:</div><div class="right_spe ...

htmlsqlsql-server

Monitor which image has been selected to alter the content inside

Is there a way to track the image clicked on and modify the inner HTML of the element located above where all the images are displayed? For instance, if I click on St. John The Baptist, I want the title to change to St. John The Baptist. Currently, the fu ...

javascripthtml

Including a logo and navigation bar in the header while collaborating with different subregions

I'm having trouble getting a picture to display in the header alongside a horizontal menu. I've divided the header into two sections: img and navbar (html). The navbar is showing up correctly, but the image isn't appearing. Any suggestions o ...

cssimageheader

Revise the "Add to Cart" button (form) to make selecting a variant mandatory

At our store, we've noticed that customers often forget to select a size or version before clicking "Add to Cart" on product pages, leading to cart abandonment. We want to add code that prevents the button from working unless a variant has been chosen ...

javascripthtmle-commerce

Incorporating docsify CSS styling into Markdown within the VScode environment

When it comes to building my blog, I've decided to go with docsify and manage my markdown files using VScode. I wanted a preview of my blog, and after noticing that <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/t ...

cssvisual-studio-codemarkdowndocsify

CSS - Button with upwards pointing arrow, requiring it to point downwards when hovered over

Struggling with the following issue: I have a button with a downward-pointing arrow in its description. When I hover over the button (or any content within it), I want the arrow to point upwards. However, currently, the arrow only points up when I hover ...

htmlcss

Spacing in CSS between the menu and its submenu elements

My current challenge involves creating space between the menu and the submenu. However, I've noticed that when there is this space, the submenu doesn't function correctly. It only works when the design has no gap between the menu and the submenu. ...

htmlcss

To enhance the menu's appearance, apply a bottom box shadow when scrolling both up and down

My menu has the following CSS properties: #header { width: 100%; position: fixed; z-index: 9000; overflow: auto; } With these CSS properties, the element #header will always stay on top, regardless of scrolling. My goal is to add a bottom box sha ...

jqueryhtmlcss

Showing headings in the table vertically

I have a header1 and header2 with corresponding data1 and data2 that I want to display differently. h h e e a a d d e e r r 1 2 data1 data2 To enhance the presentation, I wish to add borders around the head ...

javascriptpythonhtmlcss

What is the reason that CSS does not have built-in support for variables and hierarchy?

I am relatively new to UI development and I find CSS to be quite challenging to work with. Scenario: [ Experimented with CSS & less ] I wanted to apply specific styles within a particular div on a page. CSS approach : div.class1 { font: normal 12px ...

htmlcss

Ensure that the default value in the text box remains unchanged until new text is input by utilizing jQuery

Can you please review my code snippet on http://jsfiddle.net/7995m/? The issue I'm facing is that the default text in the text box disappears as soon as it's clicked. What I want is for the default text to remain until the user starts typing. Her ...

javascriptjqueryhtmlcss

What could be the reason that I am unable to absolutely position generated content in Firefox?

I am currently designing a horizontal navigation bar and here is the CSS I have used: #topnav { clear: both; overflow: hidden; display: table; } #topnav ul { display: table-row; } #topnav ul li { display: table-cell; vertical-ali ...

cssfirefoxcss-selectors

Is there a way to automatically fill a form from a database using the HTML column of a gridview?

I have developed an asp.net webform that contains checkboxes and textboxes. Upon submission, the data is stored in a SQL Server database. In addition to this form, I have created another webform with a gridview displaying the submitted data. My goal is t ...

c#jqueryhtmlasp.netgridview

What is causing all webkit browsers to overlook the z-index in my code?

I have removed all unnecessary elements from my webpage to focus on reproducing a specific issue. HTML: <html lang="en-us"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initi ...

htmlcss

Label positioning for checkboxes

Is there a way to display the checkbox label before the actual checkbox without using the "for" attribute in the label tag? I need to maintain the specific combination of the checkbox and label elements and cannot use nested labels or place other HTML elem ...

javascripthtmlcsscheckbox

Why is my "webpack" version "^5.70.0" having trouble processing jpg files?

Having trouble loading a jpg file on the Homepage of my app: import cad from './CAD/untitled.106.jpg' Encountering this error message repeatedly: assets by status 2 MiB [cached] 1 asset cached modules 2.41 MiB (javascript) 937 bytes (rjavascript ...

javascriptreactjswebwebpackmaterial-ui

Unleashing the power of jQuery, utilizing .getJSON and escaping

When I use .getJSON, the response I get is a JSON string with many \" characters. However, the callback function does not fire when the page is launched in Chrome. I have read that this happens because the JSON string is not validated as JSON (even th ...

javascriptjqueryhtmlajaxjson

The div inside another div does not appear centered on Safari

Even though I've managed to center a div within another div, it seems to not be functioning properly in the Safari browser. #box{ width: 100%; height: 100%; position: relative; } ...

htmlcss