-1

I'm trying to get a div in the homepage to fill 100% of the height it can occupy. I've tried different solutions like applying height: 100% to the body or all the divs etc. but none of it worked.

A solution would be appreciated.

Thanks in advance.

[EDIT]
I applied height: 100% to #__docusaurus and that solved the height but now it does this: https://i.stack.imgur.com/TohTP.png

djbomber36
  • 1
  • 3
  • Can you post a picture of what you got and what you want? Use the photoshop or paint, if necessary. For my understanding is that you want the navbar (the top bar) and the sidebar (the lateral panel) to be gone. – D.Kastier Nov 17 '21 at 13:19
  • What I got https://i.stack.imgur.com/7XxbV.png What I want https://i.stack.imgur.com/c7cY4.png – djbomber36 Nov 17 '21 at 13:52
  • Please provide enough code so others can better understand or reproduce the problem. – Community Nov 19 '21 at 10:20

2 Answers2

0

This is a padding in the Home Page.

Navigate to ./src/components/ and open the HomepageFeatures.js.

Inside this file, look for .features { and remove the line padding: 2rem 0;.

D.Kastier
  • 2,640
  • 3
  • 25
  • 40
0

Solved. I didn't use the height 100% but I applied the following css:

.parent { // For docusaurus/me its .main-wrapper
  display: flex;
  flex-direction: column;
}

.child { // For me its the feature section that can be seen in the images posted
  flex-grow: 1
}

I also removed the height: 100% from the child and parent

djbomber36
  • 1
  • 3