1. 

   philipavery
   

   offline

   Member

   Having made a sticky footer, I have been trying to get the content columns to be full height. The test file is at https://www.thebusinessmechanic.com/test/framework.html

   The container coloured light grey is full height but I can't find how to make the two equal height columns fill the space to the footer so that their height is not limited by the content.

   Having spent a lot of time confusing myself with the flexbox specification, I confess myself beaten. Does anybody have a solution?

   Posted 2 months ago
2. 

   Gerry
   

   offline

   PVII Team

   You need to a height, 100%, on the nested Harmony structure and also it's relevant parents.

   Add this to our style sheet:

   #p7HMY_3,
   #p7HMY_3 .hmy-content,
   #p7HMY_4 {
   height: 100%;
   }

   Posted 2 months ago
3. 

   philipavery
   

   offline

   Member

   Thanks, Gerry. I now understand the reason for the height being applied to the nested structure and its parent, but not why the hmy-content class has to be specifically referenced, although it does. If you have the time, I'd love to know.

   Posted 2 months ago
4. 

   Gerry
   

   offline

   PVII Team

   Setting the root HMY divs to height: 100% does not automatically expand the divs inside of them, they are still normal display:block divs which will only render as high as their content... one of them needs to be forced to expand to fill the 100% area. The content div inside the nested HMY makes most sense since it will force all of the parents to expand, including the divs that carry the background color.

   Posted 2 months ago

RSS feed for this topic

Reply

You must log in to post.