css块高度根据屏幕大小拉伸

在响应式网页设计中，常常需要根据不同设备的屏幕大小，来调整网页中各个元素的大小和位置。其中一个常见需求是让一个 CSS 块在不同屏幕大小下自适应拉伸。下面我们来看看如何实现。

首先，在 CSS 样式表中定义一个 CSS 块，如下所示：

.my-block{
    height: 50px;
    background-color: #00bcd4;
}

在上述代码中，我们定义了一个高度为 50px，背景颜色为 #00bcd4 的 CSS 块，现在需要让它根据屏幕大小来拉伸。

我们可以使用 CSS3 中的 calc() 函数来实现。calc() 函数可以让我们使用数学表达式来计算 CSS 属性值，如下所示：

.my-block{
    height: calc( 20vw + 20vh );
    background-color: #00bcd4;
}

在上述代码中，我们使用 calc() 函数来计算 CSS 块的高度。其中，vw 表示视窗宽度，vh 表示视窗高度。上述代码表达的意思是：CSS 块的高度为视窗宽度的 20% 加上视窗高度的 20%。这样，当屏幕大小改变时，CSS 块的高度也会自适应拉伸。

需要注意的是，上述代码只是一种实现方法，具体的高度计算公式可以根据业务需求和网页设计排版，对 calc() 函数中的数学表达式进行调整。