div+css 實現frameset佈局效果,100%高度和寬度 ,全窗口效果

最新推荐文章于 2021-06-03 08:17:06 发布

原创最新推荐文章于 2021-06-03 08:17:06 发布 · 3.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #div #html

本文介绍了一种使用CSS实现网页全屏布局的方法，通过设置html和body元素的高度为100%，并分配header、content及footer各部分相应百分比高度来达到页面满屏显示的效果。

Untitled Page

title

content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content

footer

解析: 1.一定要將html和body標籤的高度設置為100%,因為子節點的百分比高度/寬度是相對父節點而言的,只有當最根部的節點設置為100%,才能保證下面的子節點高度是100%; html { min-height: 100%; height: 100%; } body { margin: 0; padding: 0; /*min-height: 100%;*/ height: 100%; } 2.header,content,footer三塊的高度必須全部用百分比,否則其中一個用js獲取高度(窗口高度-其他層的高度之和),其他都用固定高度.只有這樣才能確定每一塊的高度,才能滿屏.