Full Height Layout on CSS
You may need to make some UI elements stay always visible at some part of the screen whatever height does middle block of the page has. In this case, if the browser’s window height is not enough to display the entire content, you could encounter different situations when you try to make some blocks sticky and do scrollable another one.
Example 1
.component {
display: flex; // set "flexbox" display behavior
flex-direction: column; // arrange child elements into one column
height: 100%; // fit entire space of direct parent element
}.middle {
flex-grow: 1; // fill empty space of .wrapper
overflow-y: auto; // make it scrollable
}
If this component has an additional wrapper, make sure that element also has a height: 100%
or flex-grow: 1
. See example 2.
Example 2
.wrapper {
height: 100%; // fit entire space of direct parent element
}.component {
display: flex; // set "flexbox" display behavior
flex-direction: column; // arrange child elements into one column
height: 100%; // fit entire space of direct parent element
}.middle {
flex-grow: 1; // fill empty space of .wrapper
overflow-y: auto; // make it scrollable
}
If a parent component is also a full-height “flexbox“ element and the child component must fit that space, change height: 100%
on flex-grow: 1
to fit parent. See example 3.
If you didn’t change height
on flexbox property, it could lead to displaying this (child) component’s content over the parent bounds as in the screenshot below. The table has own min-height
. There is not enough space to fit the table into the window that has its current height.
Example 3
.parent {
display: flex; // set "flexbox" display behavior
flex-direction: column; // arrange child elements into one column
height: 100%; // fit entire space of direct wrapper element
}.component {
display: flex; // set "flexbox" display behavior
flex-direction: column; // arrange child elements into one column
flex-grow: 1; // fill empty space of .parent
}.middle {
flex-grow: 1; // fill empty space of .component
overflow-y: auto; // make it scrollable
}
Sometimes, you need to care about the inner indents of the parent. Let’s see an example. Full-height mode. The .parent has an inner indent. The .component has the .block with min-height. Let resize the window to get the height that is not enough to display all blocks inside the .component. You can add padding-bottom and negative margin-bottom to the .component.
LESS:
@parent-inner-indent: 16px;.parent {
display: flex; // set "flexbox" display behavior
flex-direction: column; // arrange child elements into one column
height: 100%; // fit entire space of direct wrapper element
padding: @parent-inner-indent; // inner indent of wrapper
}.component {
display: flex; // set "flexbox" display behavior
flex-direction: column; // arrange child elements into one column
flex-grow: 1; // fill empty space of .parent
margin-bottom: -@parent-inner-indent; // absorb bottom padding of .parent
padding-bottom: @parent-inner-indent; // move bottom space from .parent
}// block which has inserted directly into .component
.block {
min-height: 240px;
}
Use this workaround only if there is no way to remove padding-bottom from .parent. Otherwise, you can set zero bottom indent for the .parent and assign that value to the .component.