Assume a grid that sets up three rows .2fr 1fr .2fr for the root page. The three sections are for Header, Main and Footer.
Each subsequent page alters the main area by injecting its own container of components. Depending on the main area, the footer may get pushed down too far. How can the footer always bump upward to the main area (regardless of main content)?
To debug this problem, you must start in the main section and find any offenders which make it too tall. Some examples could be images, hard coded heights, margins and or paddings each contributing to more height. As each sub container in main is selected, Chrome displays it height in top part of page. Spotting the offender is now simple to do.
The symptoms of this problem are that any fr unit adjustment (up, down, left or right) does nothing. That symptom is a huge clue of something else is stopping the desired behavior.
With the new Grid support for fr units, maybe it's time to stop hard-coding in heights, widths, and margins. Let the browser layout engine do the work.
Top comments (0)