When it comes to creating a layout for my website, I have a simple idea in mind. I want the body content to take up at least 100% of the height of the page. This setup works perfectly on desktop screens, but when I switch to a mobile view (which changes the container to a column with flexbox), I can't seem to get the body element to be 100% height. I've tried using 100vh, which does the trick for mobile, but then messes up the desktop layout. Each parent element of the body has a height greater than the body itself.
I'm working with flexbox, styled-components, and React for this project.
Any suggestions or ideas would be greatly appreciated! Thank you!
CSS for Body:
font-family: 'FuturaBold';
box-sizing:border-box;
color: black;
height: 100%;
display: flex;
flex-direction: column;
@media (max-width: ${Breakpoints.tablet}) {
padding-top: 50px;
}
CSS for Parent Element:
min-height: 100% !important;
box-sizing: border-box;
background-color: ${Colours.dark};
display: flex;
@media (max-width: ${Breakpoints.tablet}) {
flex-direction: column;
}
View image related to issue