使用过nuxt的小伙伴们总是被各种问题所坑。
因为nuxt中我们直接操作的根div并不是真的根如图：
这里多说一句，不管用什么框架，多用浏览器的开发者模式观察，能解决很多问题。
可以看到div的样式是是一个叫id叫__nuxt的，不是我们加上去的。
这里明确几个概念，
height:100% 指的是相对于父元素的高度
html,body 是最根的元素，且默认高度不是100%
一般我们这么设置（因为一般自己定义的div就是紧邻body的，body就是这个div的父元素）
html,body{height:100%}
.custom-page{height:100%}（这里这个样式会应用在我们nuxt中page文件夹的下vue文件的根div）
如上设置nuxt中无效。因为page中我们自己写的根div，并不是真的紧邻body标签的那一个。
因为通过开发者控制台我们已经知道了div的结构，所以正确的方式css这么写，如果没有成功，确保css没有被其他css覆盖。
html,
body,#__nuxt,#__layout,#__layout{
height: 100%;
margin: 0;//消除浏览器默认的margin，可以不加
padding: 0;//消除浏览器默认的padding，可以不加
}
.custom-page{
height: 100%;
}
还有一个简单的方法不需要去管任何父元素
.custom-page{
height: 100vh;
}
单位vh：相对于视口的高度。视口被均分为100单位的vh。 css3的单位，兼容性问题请自行查阅vh的详细信息。