I’m looking at your page now to see if there is an easier method but firstly I’d like to show you how the real page looks on Firefox:
As you can see the page does not display properly in Firefox and there are gaps between the images and the content. That wix page is incredibly complicated and uses far too much script and code to achieve the effect which indeed fails in Firefox due to its complexity and flawed approach.
Matters are compounded if I increase text size (as I need to do to read comfortably) and the whole thing blows up.
They are also running a mobile detection script and changing the code dynamically for mobile which is why desktop is not responsive. That also means that I can’t resize the window to an optimal fit on my monitor as the content does not adapt. All in all its a flawed approach and one that I would not wish to replicate.
I only mention the above points so that you don’t get lost in the design aspect of things as in some ways that is of less importance than the usability and accessibility of a design.
The wix page does a lot of things with scripts to resize the images in place but basically places the images individually into grid positions as required. There is nothing automatic about it and cannot handle different set ups without recoding the page to suit. In essence you could achieve the same thing by putting your content in the middle of the page and absolutely placing those 6 images into the positions they need to be. As there is no responsiveness to the page (it is a fixed width) there is no flow to maintain but you do have to work out the exact positions of each image. That could indeed be a last resort if no other suitable method cannot be found and that you must have the original design (although as I mention that design is broken in some browsers anyway).
I will have a play around with the design this afternoon and see if I can find a more reliable method or if not offer an alternative.
Yes that will make the container 100% the height of its parent container assuming the parent container also has a height defined. As the parent is the body element which you have given a 100% height to then the container will be 100% the height of the body element. However as your container starts a third of the way down the page it will then travel another 100% making it go below the bottom of the viewport. That means there will l likely be a large bit of space at the bottom of the element in some cases when not needed.
If you intended the container to just go to the bottom of the viewport (when content isn’t tall enough) then its height would have needed to be 100% minus the height of the header. That is obviously a magic number calculation that should be avoided wherever possible (sometimes you can’t avoid it but in most cases there is another solution). Instead you would have needed to contain the header and the main section in a page-wrapper that has the min-height:100vh (vh stands for viewport height and avoids having an unbroken chain of 100% heights back to root). Then using flex you could stretch main content to the bottom automatically.