height:100%这个用法只有在父容器
有高度
的情况下才可以使用过的，可是我们的body它的高度是自适应它里面元素高度的。
换句话说，通常body的高度并不是浏览器窗口高度的，所以你对下面的元素设置height:100%,并不能充满屏幕高度
那我们怎么解决呢，其实很简单。
请看代码：
margin: 0;
padding: 0;
html,body{
height: 100%;
html的父容器是什么？是浏览器窗口了，也就是根容器。我们设置html的高度为100%，实质上就是使得html充满整个浏览器高度。
body的父容器是什么?是html所以呢设置它的高度为100%，你应该明白其中的道理了
原理都懂了，我们实战一下：让一个div，使得它的高度为浏览器高度的50%，宽度占浏览器宽度的100%
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title></title>
<style>
margin: 0;
padding: 0;
html,body{
height: 100%;
font-size: 16px;
div{
width: 100%;
height: 50%;
font-weight: bold;
background: red;
</style>
</head>
<div></div>
</body>
</html>
问题重述height:100%这个用法只有在父容器有高度的情况下才可以使用过的，可是我们的body它的高度是自适应它里面元素高度的。换句话说，通常body的高度并不是浏览器窗口高度的，所以你对下面的元素设置height:100%,并不能充满屏幕高度那我们怎么解决呢，其实很简单。请看代码：/*清除默认边距*/*{ margin: 0; padding: 0;}/*设置html标签高度为100%，body高度为100%*/html,body{ height: 100%;}html
css的height属性可以
设置100%，但是必须能得到父
元素的
高度。否则无效。
#aa{background:red;height：200px;}#bb{height:80%;background:blue;}#cc{height:50%;background:green;}
<divid="aa"...
本文不讨论普通元素的大小和位置，仅仅讨论页面的大小和位置，而且为了简化问题，本文只讨论高度与顶部距离。笔者发现，页面的宽度与高度的表现有很多不同，细心的朋友会发现，故页面宽度另起文讨论，文章已经写好，见页面宽度发微。
这里说的页面高度，是指浏览器页面的高度。有以下四种元素能够表现页面的高度：window,html,document,body。这些元素的高宽常常不被人...
传送门：https://www.cnblogs.com/ch-zaizai/p/6322751.html
总结一下： 就是从hyml body 开始 所有的高度都要 height:100% 这样在你想要的区域 设置 height:100% 才会沾满剩余的屏幕
