Earthrise from Lunar Orbiter in 1966
The non-human version of Earthrise from Lunar Orbiter in 1966.

Sticky-footer with inner sticky-footer Flexbox Layout

Refactor the CSS for the Workbook Navigation.

Telescopes.
Searching for dark matter with telescopes.

Yes – We Have Heaven

Tell the moon dog, tell the march hare
Tell the moon dog, tell the march hare
We have heaven, we have heaven, we have heaven

Tell the moon dog, tell the march hare
Tell the moon dog, tell the march hare
He is here, he is here, he is here
To look around, to look around, to look around, to look around
We have heaven, we have heaven, we have heaven

https://youtu.be/7Eo3Bw2qLeI

Side Column Block Container

This is a two column, nested flexbox sticky-footer layout with an inner sticky footer column and a second, full-height sidebar. The containers rely on negative margins and media queries to re-order presentation.

The Main element is set to "flex:1 0 auto" and "align-items:stretch". Main is also set to "display: inline-flex" within a 920px media query.

The sidebar and content containers are block elements. The content container is set to "display:flex" and is an inner sticky-footer.

The order of the containers are controlled with negative margins and a float.

The inner sticky-footer content container is not sticky in mobile-first mode. The sticky footer effect is triggered at wider widths by imposing "display:inline-flex;" on the Main container.

The inline-block elements did not stretch to full height in a "display:flex" container. The inline-block elements do stretch within an "inline-flex" container.

Other CSS patterns embedded within this layout:

  • Because of CSS, setting height on the body element is necessary to stretch the HTML element to full height. I've found that for sticky flex the declaration is "height:100%". However, for the nested sticky-flex to work, the body element needs to be declared as "min-height:100%".
  • I used the Philiip Walton Sticky footer pattern for the sticky footer as well as the inner sticky footer
  • The sticky-footer flex requires a height:100% declaration on the body element, whereas the inner-sticky flex requires min-height:100% – Both declarations are here.
  • "Display:inline-flex" is required to stretch child inline-block elements.

An array of min-height, min-width, vh values needed to control layout.

This layout does not require a wrapper container to contain the nested layout.

Tutorial Links:

https://makandracards.com/makandra/39473-stretching-an-html-page-to-full-height

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Inline-block Fill