css如何让高度自适应屏幕

CSS是一种用来设置网页样式的语言，它可以让网页看起来更美观，同时也能让页面更加灵活。其中，让高度自适应屏幕就是一个很重要的功能。今天我们就来学习一下如何使用CSS让高度自适应屏幕。 首先，我们需要明确一个概念，那就是“高度自适应屏幕”和“宽度自适应屏幕”是不同的。因为屏幕的宽度是可以自动适应设备的viewport的，但是高度是需要我们手动设置的。 那么，如何使用CSS来让高度自适应屏幕呢？我们可以使用两种方法：一种是使用百分比，另一种是使用vh单位。 使用百分比，我们可以把高度设置为100%，这样就可以让其自动适应屏幕的高度。另外，我们也可以根据需要，将其设置为屏幕高度的一定比例，比如50%。 代码如下：

p {
  height: 100%;
  /* 或者是 height: 50%; */
}

另一种方法是使用vh单位。vh是viewport height(视口高度)的缩写，指的是视口的高度，1vh等于视口高度的1%。因此，我们可以直接把高度设置为100vh，这样就可以实现高度自适应屏幕的效果。 代码如下：

p {
  height: 100vh;
}

总之，使用CSS让高度自适应屏幕非常容易，只需要使用百分比或者vh单位即可实现。这样就能够让网页更加灵活，使其适应不同的设备和屏幕大小。