If I'm right, you are trying to achieve something similar.
<header id="header" height="120px"></header> <div id="content" height="fill the rest of the height"></div> <footer id="footer" height="120px"></footer>
In this case, you will need to use CSS flex . Flex works normally horizontally without any corrections, because by default any element of the block level has width=100% ie fills all the available width of the parent. But it does not have a default height . The height of a block element is calculated as the total height of all its children. The default height of the div is the height of the content . Even the <html> , <body> tags do not cover the entire height of the window; it covers the height of the content.
So, in order to do the flexible work vertically and split your screen into headers and footers and automatically adjust the content, you need to set the height starting from the top, set <html> , <body> and #root to 100%
html, body, #root { height: 100%; margin: 0; paddding: 0; }
Now your #root div takes up the entire height of the screen, so you can set the height of the title, footer and content using flex.
#root { display: flex; flex-direction: column; } header { height: 120px; } #content { flex: 1; overflow-y: auto; } footer { height: 120px; }
The same flex job can be done using javascript
We run javascript code that runs when the page loads, calculates the height of the screen and sets the ideal height for the content of the div, which solves it beautifully and neatly.
window.onload = function () { var headerHeight = document.getElementById('header').clientHeight; var footerHeight = document.getElementById('footer').clientHeight; var contentheight = screen.availHeight - headerHeight - footerHeight; document.getElementById('content').style.height = contentheight + 'px'; }
And to center the <h1> header, just use the text-align property, enough.
h1 { text-align: center; }
You do not need to set vertical-align to the middle if the <h1> does not have a specified height.