Why It Is Not Taking 100% Height in Material Design

why it is not taking 100% height in material design?

toolbar__logo: {
width: 250px;
height: 100%;
background-color: #db3131;
align-self: stretch;
}

Use this code, please. hope it will be useful for you.
The same solution like @Abhishek Anand already posted below.
you are using a flex property so you show give CSS property align-self:stretch; to the child element

Material UI Paper element not covering 100% of viewport height

It appears that your <Container> has a bit of padding that is causing the content to go beyond its height:

container too large

This could also be due to your <textarea /> not having an assigned height. This is a particular issue when you are in a medium-sized screen.

If you are already planning to do away with Bootstrap's layout system, consider flex box and styled containers:

import React from "react";
import styled from "styled-components";

export default function App() {
return (
<Container>
<StyledHeader>Hello StackOverflow</StyledHeader>
<StyledCol>
<p>This is column 1.</p>
</StyledCol>
<StyledCol>
<p>This is another column.</p>
</StyledCol>
</Container>
);
}

const Container = styled.div`
height: 700px;
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
`;

const StyledHeader = styled.h1`
height: 30%;
width: 100%;
margin: 0;

display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
`;

const StyledCol = styled.div`

height: 70%;
width: 50%;
& p {
text-align: center;
}

`;

CodeSandbox Example: https://codesandbox.io/s/stack-63802170-flexbox-example-909ol

This will ultimately give you more control over the layout of the page.

Trouble with container height = 100% not working - Angular/Material

Ok, here is what worked for me in with the code you gave me:

I added the style="height:100%" to the following classes:

html, blitz-app, to the secondary div and to the mat-sidebar-container

Edited: Changed the style of the html tag to: height:calc(100% - 64px);
Reason: the 64px is the height of the toolbar

See image

I added it all in the chrome browser debugging console, because I couldn't find the actual classes the code is using, but I am sure you can :)

Hope I could help.

How to get 100% height of page content when using a MDL fixed header in Chrome?

I created a different solution. The problem with using vh to set a content container's height is that if the content becomes a lot it will overflow the background color since the div is now a fixed height.

In this code pen I have created a "background-color" using a pseudo element which allows the content to scroll as usual but have the background still.

http://codepen.io/mcclaskiem/pen/YyWYoP

.page-content{
background-color:red;
height: 100%;
width: 100%;
&:after {
content: "";
height: 100vh;
width: 100%;
background-color: red;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
}

how to make main 100% height in material ui drawer demo

Add this to your HTML file:

    html,
body {
min-height: 100vh;
display: flex;
flex: 1;
}
#root {
display: flex;
flex: 1;
}

Codesandbox

Then add flex: 1 to your root on line 25 of demo.js

In short: your body needs to be 100vh, then you can flex whatever you need to.

Material-ui Grid item height is exceeding the height of it's container

Try this with direction="column",

<Grid
container
direction="column"
style={{ border: "solid 5px", height: "100%" }}
>
<Grid
item
style={{ border: "solid 1px", backgroundColor: "yellow" }}
>
Header
</Grid>

<Grid
item
xs
style={{ border: "solid 1px", backgroundColor: "red" }}
>
Content
</Grid>
</Grid>

Edited Sandbox

Hope this helps...

Material UI Paper component does not fit the parent component height

I have modified your example code in here.

Most browsers are default <body> contains margin, therefore, add <CssBaseline /> could reset the styling (And also added default Material UI styling).

And add paddings and height 100vh on the most top <div> could make this full height with spacing between the window.

Hope this could help~



Related Topics



Leave a reply



Submit