使html和身体舒展到100%的高度和更多,如果页面滚动 [英] Making html and body stretch to 100% height and more if the page scrolls

查看:111
本文介绍了使html和身体舒展到100%的高度和更多,如果页面滚动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想让我的< html> < body> viewport如果页面不够高,不足以保证滚动,或者网页的整个高度,如果这样。

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.

目前我使用这个CSS:

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%;
}

但是这似乎与没有 height 声明。

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

推荐答案

听起来你的目标是让身体

It sounds like your goal is for the body to


  • 始终覆盖屏幕(内容很少或没有内容)

  • 是一吨内容)

如果是这样,以下代码段应该有帮助。

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%;
}

这篇关于使html和身体舒展到100%的高度和更多,如果页面滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆