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:
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
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
Make a Div Fill an Entire Table Cell
Cannot Change Font Size of Text Field in Material Ui
Size of Html5 Canvas Via CSS Versus Element Attributes
How Are the Points in CSS Specificity Calculated
Css Child VS Descendant Selectors
Font Awesome 5 Shows Empty Square When Using the Js+Svg Version
How to Make Button Look Like a Link
Bootstrap 3 Fluid Grid Layout Issues
Difference Between @Import and Link in Css
Css Hover Drop Down Menu Disappears When Trying to Select Menu Option
How to Apply a CSS Style on Html5 Datalist Options
What Are the Differences Between Flex-Basis and Width
Remove White Space Below Image
Css Center Display Inline Block