溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“css如何使用relative設置top為百分比值”，內容詳細，步驟清晰，細節處理妥當，希望這篇“css如何使用relative設置top為百分比值”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
效果如下圖所示
效果實現
<!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。
如果設置了html元素的高度為height: 100%;那么html元素的高度會隨著viewport的高度改變。
讀到這里，這篇“css如何使用relative設置top為百分比值”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
