From previous post of this series, I was looking for a way to grow the content to full height without having to perform any calculation of subtracting the height of the other elements.
The cover image shows one method of doing it by using flexbox, specifically the
- The header section represents any top navigation bar or title
- The content section represents the area that we wish to grow to the remaining height of body.
- The footer section represents... the footer 😜
Feel free to playaround with the example in the code snippet below:
The main search page is done! 🎉 Now left the image and the advanced search pages. Prior to doing this exercise I will be underestimating the work needed to exactly replicate google search main page, but after this exercise I have more appreciation for the work needed.