1.1 簡介

當我們做html界面布局時，我們可以使width寬度為100%，從而鋪滿整個屏幕，但是由于頁面高度的不確定，所以， height:100% 屬性對于html頁面是不生效的。

1.2 解決方法

1.2.1 原理

通過設置頂級父級元素 height：100% ，即可達到目的。

1.2.2 代碼

html,body{height: 100%; }

注意： 以上代碼確實達到了設置頂級父級高度為100%的目的，但是并不能使整個頁面為100%，我們還需要將body下的容器也設置為100%，這樣才能撐起父級。如下圖所示：

樣式代碼如下：

.left-pane{width: 14%;height: 100%;float: left;background-color: #4b4b4b; } .right-pane{width: 86%;height: 100%;overflow: hidden;background-color: #dcdcdc; }

提示： 只有在頂級兩個父級高度被限制之后，body子元素才能對 height：100% 生效。

---

留有此文，解今日之惑，便他日之需。

總結

以上是生活随笔為你收集整理的HCJ1：页面高度设置为百分百的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。