Full Height Grow Explanation
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
flex-grow
attribute.
- 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:
Project0 Progress
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.
Even though the web development work so far are very basic, I am satisfied with what I have learnt and done. The GIF below shows the actual google search page VS what I had done =)
