Layout Saga - in the web application era
summary
Compares concrete CSS layout techniques for keeping a content pane scrolling independently: fixed positioning with calc fallback and a double-wrapper trick; absolute positioning using viewport units; a table-based fallback; a flexbox solution that manages one axis and reduces code by about 30%; and CSS Grid that handles both axes and cuts code roughly 20–50% compared to older methods. Notes browser compatibility limits (calc vs IE8, Grid requires modern Chrome/Edge/Firefox) and warns against tying layout tightly to frontend frameworks.
AI-written summary · about
chapters (7)
- 0:00Start
- 9:44position: fixed; with "padding" wrapper
- 11:14position: absolute
- 15:19display: flex
- 18:17display: grid
- 24:03Avoid framework dependencies
- 25:28Layout as a pattern
