CSS 设置网页高度为屏幕宽度

在网页开发中，有时候我们希望网页的高度和屏幕的宽度保持一致，这样可以使网页更加美观和适配不同设备。在这篇文章中，我将介绍如何使用CSS来实现这一效果。

1. 使用vh单位

在CSS中，我们可以使用vh单位来设置元素的长度。vh代表视口高度的百分比，即1vh等于视口高度的1%。所以如果我们将元素的高度设置为100vh，那么它的高度将会等于整个视口的高度。

html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
}

在上面的代码中，我们首先将html和body元素的高度都设置为100vh，这样整个网页的高度就会和视口的高度一样了。同时我们还将margin和padding都设置为0，这样可以保证网页内容从上到下充满整个页面。

2. 页面内容滚动

使用以上方法后，我们的页面高度会随着视口高度而改变，但是如果页面内容超过了视口高度，用户就无法滚动到页面的底部了。为了解决这个问题，我们可以给页面内容添加overflow属性。

.content {
    height: 100%;
    overflow: auto;
}

在上面的代码中，我们给页面内容添加了.content类，并将其高度设置为100%。然后使用overflow: auto;属性，当内容超出父元素的高度时，会自动添加滚动条，让用户可以滚动查看全部内容。

示例代码

下面是一个简单的HTML代码示例，展示了如何设置网页高度为屏幕宽度并且添加滚动条：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Height Page</title>
<style>
html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
}

.content {
    height: 100%;
    overflow: auto;
}

.container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background: #f0f0f0;
    border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="content">
    <div class="container">
        <h1>Welcome to Full Height Page</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae odio sed tortor facilisis vehicula. Nullam sed ullamcorper dolor. Vivamus vel dui ultrices, fermentum velit nec, laoreet felis. Vestibulum venenatis, purus sed ullamcorper vehicula, eros dolor auctor elit, ac semper nunc augue non tortor.</p>
    </div>
</div>
</body>
</html>

这段代码中，我们设置了一个包含欢迎词和段落内容的容器，然后将这个容器的高度设置为100%以保证填充整个页面，并且添加了滚动条以便查看超出视口高度的内容。页面内容会自动适应屏幕高度，且能够垂直滚动查看全部内容。