Setting the height of a div according to the viewport

On page where there is little content the footer banner appears too far up the screen. It would be good to have the height of the main content to correspond to the size and orientation of the screens Viewport.

My first thought was to have a media-query that would pick up on the device-height, as does the responsive design in general, This would be okay but I would potentially need an extra media-query for mobile, tablet and desktop.

A for better solution would be a div that changed its height depending on the viewport of the screen.

The main div

The scrollHeight of the main div is:

The Element.scrollHeight read-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow.

The scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewport without using a vertical scrollbar. The height is measured in the same way as clientHeight: it includes the element's padding, but not its border, margin or horizontal scrollbar (if present). It can also include the height of pseudo-elements such as ::before or ::after. If the element's content can fit without a need for vertical scrollbar, its scrollHeight is equal to clientHeight

Links

• viewport
• Media Query
• ScrollHeight

External Sources

• Element.scrollHeight - 🔗