CSS - Define the vertical height based on an element

December 2016



Sometimes we want to define a vertical height of a page, based on a specific element.

Issue


It is quite simple to implement, using fixed values (not pixels), but it's more complicated when using relative heights (percentage).

This problem is often encountered when using background images to create a border with a certain style to an element.

Solution


To set a vertical height on an item, it is necessary that every parent element have a defined height too.

We must define a height tags to html, body, and all tags containing the element must have a certain height.

This gives for example:

html,body,div#body,div#all_my_elements{height:100%}

Related :

This document entitled « CSS - Define the vertical height based on an element » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.