如果页面滚动,使html和body伸展到100%高度和更多

前端之家收集整理的这篇文章主要介绍了如果页面滚动,使html和body伸展到100%高度和更多前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想制作我的< html>和< body>如果页面不够高以保证滚动,则标记为视口的整个高度,如果页面不够高,则标记为视口的整个高度.

目前我正在使用这个CSS:

html,body {
    height: 100%;
}

如果网页不够高,用户无法滚动,那么这会很有效,但是在长网页上,它只会到达用户浏览器上视口的高度.我也尝试过:

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

但这似乎与没有高度声明具有相同的效果.

解决方法

听起来你的目标是身体

>始终覆盖屏幕(最少或没有内容)
>能够伸展(如果有大量内容)

如果是这种情况,以下代码片段应该有所帮助

/* 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相关文章