刚仿站遇到了小问题，瞎百度终于解决了。记录一下。
场景：
两个页面高度不一样，一个没有超过显示器高度，一个超过了显示器高度。
需求：
使用一套css做背景填充，就是自适应，超过显示器的按实际内容高度填充，没超过的按显示器高度填充。
没超过屏幕高度的时候这样写
html,body{
height:100%;
}
body{
background: linear-gradient(to bottom, #4568dc, #b06ab3);
}
应该是轻轻松松。
突然来了个超过显示器高度的
页面变成生么样子了？
表面看很正常，但下滑就发现了问题。
！！！没错，背景高度是显示器的100%，下滑是另一个repeat的背景
这时 min-height来了
带着问题来了。问题：min-height放在哪里？？？
是放body还是放html呢？ 不妨都试试。
放body里面
<style>
html {
height: 100%;
}
body {
background: linear-gradient(to bottom, #4568dc, #b06ab3);
min-height: 100%;
}
div {
height: 1000px;
}
</style>
<body>
<div>我的内容超过了视口高度</div>
</body>
结果：和原来一样。。。。
分析：html有了100%，此时值为显示屏高度。后面又来个body的min-height：100%，此时body的高度要怎么变化？？
答案是：变成父元素的100%，也就是变成了html的100%，也就是显示屏的高度。
可能会问，不对吧？body里面的元素不是撑开了body了吗？毕竟是min-height，height不会变高吗？
答：（哈哈哈，我写文章怎么提出来这个问题了？？我也不知道怎么回答啊 还是请大佬回答吧 ） 事实胜于雄辩，，，，，
放到html里
html {
min-height: 100%;
}
body {
height: 100%;
background: linear-gradient(to bottom, #4568dc, #b06ab3);
}
div {
height: 1000px;
}
实际效果：
没错！超出视口高度的页面，背景也是铺满的，那没超过的呢？
这里把html里面的div删掉后放张图
是这种感觉！
但是为什么这样就可以了呢？不妨冷静分析一下.
html设置min-height:100%,body设置了height：100%，，
等等，这不是 父亲min-height 孩子height：100%吗，，，body的100%应该是不起作用的！ （min-height不会往下传递）
所以，删除掉body里面的100%，效果不变！
现在只有html设置了min-height：100%，重新审视一下min-height：100%
在内容高度达不到视口高度的时候，html标签设置height：100%是视口的高度，不妨假设此时的min-height：100% 和 height：100%效果一样。
但当内容较高的时候，height：100%是被定死了，而min-height：100%，值就不是100%了，html标签随着 内容撑开了！
