本篇内容介绍了“css如何实现垂直伸缩效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
实现效果：
实现代码：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>垂直伸缩</title> <style type="text/css"> *{ padding: 0; margin: 0; } body,html{ height: 100%; } .content{ min-width: 810px; min-height: 600px; height: 100%; border: 1px dashed green; } .wrap{ width: 100%; height: 191px; border: 1px solid blue; position: relative; top: 38.2%; } .wrap-content{ width: 100%; height: 191px; background-color: red; position: relative; top: -191px; } </style></head><body> <div class="content"> <div class="wrap"> <div class="wrap-content"> </div> </div> </div></body></html>利用的原理：
百分比值的计算方式：实际值 = 具有确定宽高的祖先元素的宽高 * 百分比值。默认情况下，块级元素的宽为100%，高度则是根据内容来计算。所以如果祖先元素没有确定了高度的，那么百分比值也无法确定，它的值会被设置为0。
css的选择器有哪些
css的选择器可以分为三大类，即id选择器、class选择器、标签选择器。它们之间可以有多种组合，有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等等
“css如何实现垂直伸缩效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
