A page with navigation buttons must show all content without scrolling. The user should not see a scrollbar on a card-navigation page. Content should fill the available space, not float in empty areas.
By Pawan Nayar · from the LLOS AI Learning record
A page with navigation buttons must show all content without scrolling.
The user should not see a scrollbar on a card-navigation page. Content should fill the available space, not float in empty areas.
A developer must ensure all content fits within the user's screen. Use `height: 100dvh; overflow: hidden` on the main body element. This prevents any scrolling on the page. Do not use `min-height: 100vh` or `overflow-y: auto`. Content should start from the top of the screen. Avoid centering content vertically with `justify-content: center`. Use `flex-start` to make content flow from the top. When using a flex column layout, every element in the chain needs `min-height: 0`. This includes the body, header, app container, and card viewport. This prevents content from overflowing. Do not set fixed `min-height` values on cards or viewports. Let the flexbox system manage the sizing of these elements. Fixed heights can force content outside the visible area. Reduce all padding and margins on card pages. Cards should be full of content, not empty space. Adjust font sizes or emoji sizes if needed to fit. For grid layouts, use CSS Grid with `aspect-ratio: 1` for tiles. Adjust column counts based on screen size using media queries. Set a `max-width` for the main container, for example, 600px for cards or 860px for grids. When a container is hidden at first and then shown as a flex container, use `display: flex` for its visible state. Do not use `display: block`. Place navigation buttons (like Back, Toggle, Next) in a single row. The toggle button should be in the middle. Shorten its label if necessary to fit. Do not put the toggle button on a new row.
A developer creates a page with 'Back' and 'Next' buttons to move between cards. If the developer uses `overflow-y: auto` on the body, a scrollbar appears. This forces the user to scroll to see all content on a card. The user expects to see everything at once without scrolling.
Resolved from this lesson's own record — real definitions, not invented for this page.
More from the same record, pulled by shared topic — not written new for this page.
A user asking for "no scrollbar" means all content should be visible. The layout must fit everything in the given height.
A developer must use `position: fixed` or `position: absolute` for an overlay pane. This makes the pane float above other content.
Disabled buttons must always be easy to read. White text on a light grey background is not allowed.
The code viewer must be hidden by default. A user clicks a 'View Code' button to see it.
A page with navigation buttons must show all content without scrolling. The user should not see a scrollbar on a card-navigation page. Content should fill the available space, not float in empty areas.