[PRACTICE] 取得全網頁高度

網頁包含三個 div。

div 的 CSS 設定:

box-sizing: border-box;

width: 300px;
height: 500px;

margin: 20px auto;
padding: 10px;

border: 5px solid #eee;

每個 div 的高度為:border + padding + 內容 = 500px

第一個 div 跟第二個 div 之間的 margin + 第二個 div 跟第三個 div 之間的 margin(div 之間的 margin 會重疊):20px + 20px

再加上第一個 div 的 margin(top) 跟最後一個 div 的 margin(bottom):20px + 20px

全網頁高度為:20px + 500px + 20px + 500px + 20px + 500px + 20px = 1580px

JS 的部份,document.documentElement 指的是 html 元素。

Demo
https://www.yuantw.com/demo/js-offset-height/

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

返回頂端