<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的網頁</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
width: 100%;
overflow: hidden;
}
#container {
width: 100%;
height: 100%;
position: relative;
}
#header {
height: 100px;
position: absolute;
top: 0;
left: 0;
width:100%;
background-color: #ccc;
}
#main {
min-height: 100%;
padding-bottom: 50px;
box-sizing: border-box;
position: relative;
margin-top: 100px;
}
#footer {
height: 50px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
</html>上述代碼中,*選擇器設置了所有元素的外邊距和內邊距為0,使得各元素緊貼邊緣顯示。
然后,用html和body元素設置了全屏顯示,并設置了overflow: hidden,以隱藏滾動條。使用#container來包圍各個元素,并設置其position: relative。
此時,#header和#main的相對定位將相對于#container定位。其中#header的高度為100px,定義了固定高度,而#main使用min-height: 100%來保證最小高度為100%,并設置了padding-bottom: 50px,以留出#footer的位置。#footer的高度為50px。
最后,在CSS中設置各元素的背景顏色,即可實現全窗口顯示的布局。
總的來說,使用DIV+CSS布局全窗口是能夠輕松實現網頁全屏顯示的一種好方法。它的優(yōu)點是布局簡單、清晰、易于維護,可靠性高。在實現網頁全屏顯示的同時,也能夠增強用戶體驗和設計效果,更好地為用戶提供服務。
網站導航
- zblogPHP模板zbpkf
- zblog免費模板zblogfree
- zblog模板學習zblogxuexi
- zblogPHP仿站zbpfang