效果實現
<!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> <p class="content"> <p class="wrap"> <p class="wrap-content"> </p> </p> </p></body></html>
分析
利用的原理：
百分比值的計算方式：實際值 = 具有確定寬高的祖先元素的寬高 * 百分比值。預設情況下，區塊層級元素的寬為100%，高度則是根據內容來計算。所以如果祖先元素沒有確定了高度的，那麼百分比值也無法確定，它的值會被設定為0。
如果設定了html元素的高度為height: 100%;那麼html元素的高度會隨著viewport的高度改變。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
