css一屏幕高度自适应

在网页设计中，自适应布局已成为主流，CSS是实现自适应布局的重要工具之一。本文将介绍如何使用CSS实现一屏幕高度自适应。

html,body{
  height:100%;
  margin:0;
  padding:0;
}
.wrapper{
  height:100%;
}
.content{
  min-height:100%;
  Box-sizing:border-Box;
  padding-bottom:50px;/*底部预留footer的高度*/
}
.footer{
  height:50px;
}

首先，要实现一屏幕高度自适应，我们需要设置html和body元素的高度为100%，这样可以让页面充满整个屏幕。另外，我们去掉了这两个元素的margin和padding，以保证页面的完整性。

其次，我们需要用一个.wrapper来包含整个页面内容，设置其高度为100%。这样可以让页面内容充满整个屏幕。

然后，我们要设置.content的最小高度为100%，这样可以让内容超出屏幕时自动出现滚动条。另外，我们要使用Box-sizing来使padding不影响元素的实际高度。最后，我们给.content预留了一个高度为50px的.footer，以保证.content不会被.footer遮盖。

综上所述，通过上述CSS代码的设置，页面在不同设备上都可以实现一屏幕高度自适应，可以使用户有更好的阅读体验。