DEV Community

loading...
Cover image for Project0 #2 - Grow to Full Height Using Flexbox

Project0 #2 - Grow to Full Height Using Flexbox

wizlee profile image Wiz Lee ใƒป1 min read

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 =)
Alt Text

Discussion (0)

pic
Editor guide