Achieve full height in Grid component of material UI by eliminating margins

In this codesandbox example, I have successfully set the grid container height to full using 100vh. However, there is an issue with a margin of 8px being added by the user agent to the body element, and I'm struggling to find a solution to remove it.

<Box sx={{ flexGrow: 1 }}>
  <Grid container spacing={2} sx={{ height: "100vh" }}>
    <Grid item xs={4} sx={{ backgroundColor: "red" }} />
    <Grid item xs={8} sx={{ backgroundColor: "blue" }} />
  </Grid>
</Box>

Does anyone have any suggestions or solutions for this issue?

cssresponsive-designmaterial-uigridresponsive

Answer №1

Don't forget to include <CssBaseLine /> to reset default margins and paddings.

import { CssBaseline } from "@mui/material";

ReactDOM.render(
  <StyledEngineProvider injectFirst>
    <CssBaseline/> 
    <Demo />
  </StyledEngineProvider>,
  document.querySelector("#root")
);

In order to adjust the spacing in Material-UI's Grid, negative margins are used. This is why the parent of the Grid should have padding that will correct this negative margin.

<Box paddingTop={2} sx={{ flexGrow: 1 }}>
  <Grid container spacing={2} sx={{ height: "100vh" }}>
    <Grid item xs={4} sx={{ backgroundColor: "red" }} />
    <Grid item xs={8} sx={{ backgroundColor: "blue" }} />
  </Grid>
</Box>

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

Adjusting Nested Divs based on the Content

One issue I'm facing is that the nested div ('content') isn't adjusting its height based on the actual content, specifically my form. The parent div adjusts its height but the child div doesn't. Any ideas on how to fix this? HTML: ...

csshtml

Enlarge the image to fill the entire screen

Currently, I am working on a webpage where I am displaying data fetched from a database using Laravel framework. The code snippet is shown below: Here is how the webpage looks like - image1 What I aim to achieve is to make the div go fullscreen upon clic ...

phphtmlcsslaravel

The main menu vanishes when you hover over it after the affix class is activated

I am currently working on creating a horizontal dropdown menu that expands on mouseover and collapses on mouseout under one of the main menu items. The functionality of this effect is working fine, except for one issue. When I scroll down and activate the ...

jqueryhtmlcss

Calculating dimensions for parents and their children

Could someone please explain to me why the size of #child is different from that of #parent? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or ...

htmlbordermargincss

Changing a property on a ReactJS MaterialUI FloatingButton with a click event

Looking to emulate checkbox behavior using a FloatingButton. Initially, the buttons load with the secondary attribute set to true: <FloatingActionButton secondary={true} mini> T </FloatingActionButton> If clicked, it switches the secondar ...

reactjsmaterial-ui

Unable to display the absolute path of the image src in WebStorm

Hey there! I recently started learning HTML5 and have been using WebStorm on my trusty Macbook Air for about two weeks now. I've encountered a problem with image sourcing that has left me puzzled. Here's my question: Why is it that images from ...

csshtmlimagewebstormsrc

Animation of Blink Effect using Material UI

Currently, I am in the process of developing a GatsbyJS website using Material UI. I have been attempting to create a blinking animation by utilizing the withStyles HOC. I made an attempt to include the animation within the styles: const styles = theme =&g ...

reactjsanimationmaterial-uigatsbyjss

Hover over images with the use of html or css styling

I've been attempting to change an image on my website when I hover over it, but despite looking at various examples, I still can't get it to work. Can someone please help me figure out what I'm doing wrong? Below is the HTML code I'm u ...

htmlcssimagehover

Abnormal scrolling issues observed on handheld devices like mobile phones and tablets

I recently added a parallax effect to the hero section of my website, and while it works perfectly on desktop, I encountered some scrolling issues when viewing it on mobile or tablet devices. Sometimes the scrolling behaves as intended, and other times it ...

javascripthtmljquerycss

What is the best way to prevent labels from floating to the top when in focus?

How can I prevent the label from floating on top when focusing on a date picker using Material UI? I have tried several methods but nothing seems to work. I attempted using InputLabelProps={{ shrink: false }} but it did not resolve the issue. Here is a li ...

javascriptreactjsmaterial-uidatepickermaterial-design

Navigating pages using Material UI components

Is there someone who can assist me in developing an in-page navigation feature that dynamically updates as you scroll down the page? I have been unable to locate any resources on how to achieve this. The navigation is positioned on the right side of the ph ...

reactjsnavigationmaterial-ui

Which event listener in the DOM API should I use to trigger an action when a form field is focused, whether through a mouse click or by tabbing?

My aim is to increase the size of form fields when the cursor focuses on them, either through a mouse click or by tabbing using the keyboard. By utilizing document.activeElement focus, I can identify when the user clicks inside a text input or selects an ...

javascripthtmljquerycss

What is the best way to enlarge an element when scrolling downwards within the element?

I am looking to create a div that dynamically adjusts its height based on the user's scrolling behavior. The goal is for the div to expand to the very top as the user scrolls downward, and stop when it reaches 70% of the container/parent element. Is t ...

javascripthtmlcss

Color of Bootstrap tooltip arrow outline and fill

How can I customize the background color and border color of the tooltip arrow in Bootstrap 4? $(function() { $('[data-toggle="tooltip"]').tooltip() }) .tooltip-main { width: 15px; height: 15px; border-radius: 50%; font-weig ...

csstwitter-bootstrapbootstrap-4

Using Roboto Typeface in Cascading Style Sheets

I am currently working on implementing the "Roboto" font in my Prestashop website. The design files I received are in .psd format, and the graphic designer used fonts "Roboto Medium" and "Roboto Regular". To clarify, if I want to use Roboto Normal, can I s ...

cssfonts

Struggling to fix the excess white space appearing underneath my website

I am new to HTML/CSS and I'm currently working on adding a timeline to my website. However, I've encountered a strange issue with the #timeline class where there is an odd block of space below it whenever I try to adjust the height. So far, I ha ...

htmlcssuser-interface

The Material UI stepper lacks animation

I am currently using a vertical stepper in Material UI to display a pricing calculator. However, the animation feature is no longer functioning as expected. Previously, the stepper would animate a collapse effect when the steps changed. I suspect that thi ...

reactjsmaterial-ui

What is the best way to change the maxWidthLg of Material UI's .MuiContainer?

I need to remove the max-width that is set in the theme. When I look at it in Chrome and uncheck the option, it functions as desired: @media (min-width: 1280px) .MuiContainer-maxWidthLg { max-width: 1280px; } How can I achieve this? I have attempted ...

cssreactjsmaterial-uioverriding

`Scrolling through a horizontal menu with no scrollbar present`

Is there a way to create a horizontal menu that can scroll left or right without the scrollbar? I'm looking for a solution like adding on-screen arrow buttons or implementing mouseover functionality. What would be the best approach? div.scrollmenu ...

javascriptjqueryhtmlcssscroll

Updating Mysql data via a button on the homepage using the passed ID in the URL - a step-by-step guide

I have set up a Bootstrap modal popup for editing items on the home page. My goal now is to update the details of the selected item using PHP. In this case, I am passing the item id through the URL to select the item. After clicking the edit button, a po ...

phphtmljquerycssajax