CSS
Full Height Section with Internal Scrollable Content using Flexbox
Learn to create sections that dynamically fill available vertical space while allowing their internal content to scroll independently, using a combination of Flexbox properties for robust UI.
html, body {
margin: 0;
padding: 0;
height: 100%; /* Crucial for body to take full viewport height */
font-family: Arial, sans-serif;
}
.full-height-layout {
display: flex;
flex-direction: column; /* Stack items vertically */
height: 100vh; /* Make the layout take full viewport height */
/* Or height: 100%; if its parent has a defined height */
border: 2px solid #333;
}
.header, .footer {
flex-shrink: 0; /* Prevent header/footer from shrinking */
background-color: #f8f8f8;
padding: 15px;
text-align: center;
border-bottom: 1px solid #ddd;
}
.footer {
border-top: 1px solid #ddd;
border-bottom: none;
}
.main-content-scrollable {
flex-grow: 1; /* Allow this section to grow and fill available space */
overflow-y: auto; /* Enable vertical scrolling for content overflow */
padding: 20px;
background-color: #fff;
/* A height of 0 ensures it starts as small as possible before flex-grow takes over */
height: 0; /* Important for some browser contexts with overflow: auto */
}
/* Example content for scrolling */
.scroll-content {
height: 1200px; /* Force content to overflow for demonstration */
background-image: linear-gradient(to bottom, #add8e6, #fff);
padding: 20px;
}
How it works: This snippet uses Flexbox to create a full-height layout where a specific content area can scroll independently. The `.full-height-layout` container is set to `display: flex` with `flex-direction: column` and `height: 100vh`. The `.header` and `.footer` elements have `flex-shrink: 0` to maintain their size. Crucially, the `.main-content-scrollable` element has `flex-grow: 1` to expand and fill all remaining vertical space, and `overflow-y: auto` to enable internal scrolling when its content exceeds its height, preventing the entire page from scrolling.