css - Making html and body stretch to 100% height and more if the page scrolls

Question

Welcome To Ask or Share your Answers For Others

css - Making html and body stretch to 100% height and more if the page scrolls

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

css - Making html and body stretch to 100% height and more if the page scrolls

I want to make my <html> and <body> tags be the entire height of the viewport if the page isn't tall enough to warrant scrolling, or the entire height of the web page if it does.

At the moment I'm using this CSS:

html, body {
    height: 100%;
}

Which works a treat if the web page isn't tall enough for the user to scroll, however on a long webpage it only goes to the height of the viewport on the users browser. I also tried:

html, body {
    min-height: 100%;
}

but that just seems to have the same effect as having no height declaration at all.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T20:00:54+0000

It sounds like your goal is for the body to

always cover the screen (with minimal or no content)
be able to stretch (if there is a ton of content)

if that's the case the following snippet should help

/* this looks like it should work

       html, body{
         min-height: 100%;
       }

    but this ↓ does the trick */

html, body{
  padding: 0;
  margin: 0;
}
html{
  height: 100%;
}
body{
  min-height: 100%;
}

Categories

css - Making html and body stretch to 100% height and more if the page scrolls

css - Making html and body stretch to 100% height and more if the page scrolls

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags