前言：
最近在學(xué)習(xí)HTML、CSS的過程中，想模仿一下百度首頁。發(fā)現(xiàn)搜索框這一部分與上下其它元素的空白距離可以隨著窗口大小變化（效果如下圖所示），于是自己研究了一下并記錄下來。
效果實(shí)現(xiàn)
<!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>分析
利用的原理：
百分比值的計(jì)算方式：實(shí)際值 = 具有確定寬高的祖先元素的寬高 * 百分比值。默認(rèn)情況下，塊級(jí)元素的寬為100%，高度則是根據(jù)內(nèi)容來計(jì)算。所以如果祖先元素沒有確定了高度的，那么百分比值也無法確定，它的值會(huì)被設(shè)置為0。
如果設(shè)置了html元素的高度為height: 100%;那么html元素的高度會(huì)隨著viewport的高度改變。
總結(jié)
以上所述是小編給大家介紹的css 使用relative設(shè)置top為百分比值(仿百度首頁)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)VeVb武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
