极客笔记CSS height: 100vh; 和 overflow “content” 在小屏幕上
在本文中，我们将介绍CSS的height: 100vh属性以及在小屏幕上使用overflow “content”的效果。这两个属性在响应式网页设计中具有重要作用，可以帮助我们在不同设备上显示并控制内容的高度和溢出效果。
阅读更多：CSS 教程
CSS height: 100vh
首先，让我们来了解一下CSS的height: 100vh属性。vh代表视口高度(viewport height)，即整个浏览器窗口的高度。使用height: 100vh可以让元素的高度等于视口的高度，从而实现全屏高度的效果。
例如，如果我们有一个div元素，并给它的样式设置为height: 100vh，那么这个div的高度将会铺满整个浏览器窗口的可见部分。这在一些需要全屏展示的页面或者区块中非常有用。
<!DOCTYPE html>
<html>
<head>
<style>
#fullscreen {
background-color: #f2f2f2;
height: 100vh;
}
</style>
</head>
<body>
<div id="fullscreen">
<h1>这是一个全屏展示的区块</h1>
</div>
</body>
</html>
上述示例中，我们给id为”fullscreen”的div元素设置了height: 100vh，这样它的高度将会铺满整个浏览器窗口。
overflow “content” 在小屏幕上
接下来，让我们来讨论在小屏幕上使用overflow “content”的效果。overflow属性用于控制当内容溢出容器时的显示方式。
当内容超出容器的尺寸时，通常会出现滚动条来显示溢出的内容。overflow属性有多个值可以选择，其中之一是”content”。当设置overflow: content时，浏览器会自动调整容器的尺寸以适应溢出的内容，而不出现滚动条。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 200px;
border: 1px solid #ccc;
overflow: content;
}
</style>
</head>
<body>
<div class="container">
<p>这是一个会产生溢出的段落。这是一个会产生溢出的段落。这是一个会产生溢出的段落。这是一个会产生溢出的段落。这是一个会产生溢出的段落。这是一个会产生溢出的段落。</p>
</div>
</body>
</html>
上述示例中，我们创建了一个宽度为200px、高度为200px的容器，并设置了overflow: content。在容器中我们添加了一个段落，其中的文本超过容器的尺寸。然而，由于overflow属性设置为content，容器的尺寸会自动调整以适应溢出的内容，而不会出现滚动条。
总结
在本文中，我们介绍了CSS的height: 100vh属性和在小屏幕上使用overflow “content”的效果。height: 100vh可以让元素的高度等于视口的高度，实现全屏高度的效果。而overflow: content可以在内容溢出时自动调整容器的尺寸，而不出现滚动条。这些属性在响应式网页设计中非常有用，可以根据设备的大小和屏幕上的内容来适应性地进行布局和显示。希望本文对你理解和使用这些属性有所帮助。