Breaking News: Grepper is joining You.com. Read the official announcement!

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

Sakar Hamasaeed answered on November 11, 2022 Popularity 1/10 Helpfulness 1/10

answer CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

Comment

//html
<body>
  <header contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

body{ min-height: 100vh; margin:0; }

header{ min-height:50px; background:lightcyan; }
footer{ min-height:50px; background:PapayaWhip; }

/* The article fills all the space between header & footer */
body{ display:flex; flex-direction:column; }
article{ flex:1; }

Popularity 1/10 Helpfulness 1/10 Language css

Source: stackoverflow.com

Tags: css footer html minimum overlap

Link to this answer
Share Copy Link