css 设置body的最小高度是100%，满屏显示

解决问题：

1.body里的内容不满一屏时，body的高度满屏；
2.当内容超出屏幕高度时，内容的高度就是body的高度。

方法一：没有设置body的高度，内容不满屏，但是背景色却铺满整个屏幕，方法如下：

html {} // html不设置背景色
body { background: pink; }

*注：可是为什么我们在写项目的时候，却并没有达到这个效果，而是内容多高，body背景就是多高呢？
细心发现，html设置了一个背景色。
可是为什么html设置了背景色，body的满屏背景色却失效了呢？我猜测这可能是和浏览器的机制有关，浏览器会先找html有没有背景色，如果没有则往下查找body的，如果body有则取它来做底板的颜色。

方法二：

html, body { height: 100%; }

*注：如果内容没有超过屏幕的高度，是没有任何问题，但是当内容高度大于屏幕高度时，body的高度被写死，高度和屏幕高度相等，并没有满足我们的需求；效果如图：

方法二：

<style>html { height: 100%; overflow: auto; }body { min-height: 100%; }
</style>

在视觉上，这个方法是可以实现我们的需求的。
可是细心的会发现，如果内容超过一屏幕，滚动条向下滚动的时候，html的高度只有一屏幕的高度

方法三：

html, body {height: 100%;overflow: auto;
}

可以实现，但是html,和body的高度是屏幕的高度

css 设置body的最小高度是100%，满屏显示相关推荐

uni-app - 设置最外层容器高度为100%
在小程序中设置page的页面高度为100%只需要在app.wxss中设置 page {height: 100%; } 即可,但是在uniapp中,想要设置page的页面高度为100%就需要在App. ...
html页脚显示不出来,CSS实例:让页脚保持在未满屏页面的底部
CSS实例:让页脚保持在未满屏页面的底部互联网发布时间:2008-10-17 19:20:27 作者:佚名我要评论在内容不超过一屏的情况下,当浏览器窗口变小那行页脚文字会跟着向上浮 ...
video 满屏显示_微信video标签视频设置全屏属性
微信video标签视频设置全屏属性,支持安卓和ios系统的视频控制器和播放按钮隐藏和视频全屏,微信使用的内核是X5 x-webkit-airplay="true" x5-video ...
CSS设置盒子容器(div)高度(height)始终为100%
前言有时需要让一个盒子容器的高度始终保持100%,无论怎么缩放浏览器高度始终不变.就像一些网站的侧边栏,但直接设置盒子容器的高度为100%是不起作用的. demo 如果想让一个元素的百分比高度he ...
android电视设置hdmi输出,利用HDMI线实现多屏显示的设置方法!
原标题:利用HDMI线实现多屏显示的设置方法! 利用HDMI线实现多屏显示的设置方法!下面从2个方面进行说明,具体的由HDMI线厂家怡万达电子为你分析介绍. 1.HDMI线接电视设置方法,如何设置多屏 ...
CSS设置div与屏幕高度一致
具体实现 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
使用CSS设置背景图片，图片比较大，完全显示在一个DIV中
做的时候想要边框为比较好看的样式,需要UI切图并且放在div中,看起来会好看点像这样的,我随便挑选了一个,UI帮我切图出来需要把这个图片填到相应的div里面,但是很显然碰到一个问题,图片太大,而且 ...
bootstrap如何设置满屏显示
<div class="container"> 不占满视口 </div> <div class="container-fiuled" ...
css 全屏显示一张图片_css3背景图片全屏显示的例子
背景图片全屏这个功能只需要定义重复即可解决了当然这个是有一些技巧了,下面我们就来看一篇关于css3背景图片全屏显示例子了,具体的如下所示. 如何用css背景图片拉伸以及100% 满屏显示呢?这个问题 ...

css 设置body的最小高度是100%，满屏显示

解决问题：

css 设置body的最小高度是100%，满屏显示相关推荐

最新文章

热门文章