(div+css)上面固定下面自適應頁面佈局的實現（FF,IE)

原創 gxmark 2018-08-27 11:55
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>上面固定下面自適應</title>
  6. <style type="text/css">
  7.     html
  8.     {    
  9.         margin:0;
  10.         overflow:hidden;
  11.         _padding:61px 0px 0px 0;
  12.         _border:0;      
  13.     }    
  14.      body 
  15.     {
  16.         margin:0;           
  17.         height:100%;                 
  18.     }   
  19.     #content 
  20.     {   
  21.         margin:0; /*公共*/
  22.         width:100%;
  23.         position:fixed;/*FF IE7 SF*/ 
  24.         top:61px;
  25.         bottom:0px;           
  26.         overflow: auto !important;
  27.         _position: relative;/**IE6***/        
  28.         _top:0px;        
  29.         _OVERFLOW-Y: auto; 
  30.         _OVERFLOW-X: auto; 
  31.         SCROLLBAR-FACE-COLOR: #EEEEEE;
  32.         SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; 
  33.         SCROLLBAR-SHADOW-COLOR: #919192;        
  34.         SCROLLBAR-3DLIGHT-COLOR:#ffffff;
  35.         SCROLLBAR-ARROW-COLOR: #919192; 
  36.         SCROLLBAR-TRACK-COLOR: #ffffff; 
  37.         SCROLLBAR-DARKSHADOW-COLOR: #ffffff;        
  38.         _height:100%;              
  39.     }   
  40.     #header {
  41.         position:absolute;/*公共*/
  42.         top:0;
  43.         left:0;
  44.         width:100%;
  45.         height:60px;    
  46.         border-bottom:solid 1px #AE85E1;    
  47.         background-color:#EFEFEF;       
  48.         overflow:auto !important;/*FF*/
  49.         _OVERFLOW-Y: auto;/*IE6*/ 
  50.         _OVERFLOW-X: auto; 
  51.         SCROLLBAR-FACE-COLOR: #EEEEEE;
  52.         SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; 
  53.         SCROLLBAR-SHADOW-COLOR: #919192;        
  54.         SCROLLBAR-3DLIGHT-COLOR:#ffffff;
  55.         SCROLLBAR-ARROW-COLOR: #919192; 
  56.         SCROLLBAR-TRACK-COLOR: #ffffff; 
  57.         SCROLLBAR-DARKSHADOW-COLOR: #ffffff;     
  58.     }
  59. </style>
  60. </head>
  62. <body>
  63. <div id="header">上部固定部分</div>
  64. <div id="content">
  65. <p>中部自適用部分</p>
  66. <p>設定寬度爲1000px的線</p>
  67. <hr width="1000px" />
  68. <p>中部自適用部分</p>
  69. <p>中部自適用部分</p>
  70. <p>中部自適用部分</p>
  71. <p>中部自適用部分</p>
  72. <p>中部自適用部分</p>
  73. <p>中部自適用部分</p>
  74. <p>中部自適用部分</p>
  75. <p>中部自適用部分</p>
  76. <p>中部自適用部分</p>
  77. <p>中部自適用部分</p>
  78. <p>中部自適用部分</p>
  79. <p>中部自適用部分</p>
  80. <p>中部自適用部分</p>
  81. <p>中部自適用部分</p>
  82. <p>中部自適用部分</p>
  83. <p>中部自適用部分</p>
  84. <p>中部自適用部分</p>
  85. <p>中部自適用部分</p>
  86. <p>中部自適用部分</p>
  87. <p>中部自適用部分</p>
  88. <p>中部自適用部分</p>
  89. <p>中部自適用部分</p>
  90. <p>中部自適用部分</p>
  91. <p>中部自適用部分</p>
  92. <p>中部自適用部分</p>
  93. <p>中部自適用部分</p>
  94. <p>中部自適用部分</p>
  95. <p>中部自適用部分</p>
  96. <p>中部自適用部分</p>
  97. <p>中部自適用部分</p>
  98. <p>中部自適用部分</p>
  99. <p>中部自適用部分</p>
  100. <p>中部自適用部分</p>
  101. <p>中部自適用部分</p>
  102. <p>中部自適用部分</p>　
  103. </div>
  104. </body>
  105. </html>

本頁面佈局在firefox3和IE6下測試通過。其它瀏覽器沒有測試，大家可以在其它瀏覽器下測試一下，然後把測試結果共享出來，謝謝！

主要思路：因FF和IE在解釋css上面存在一定的差別（IE6對position:fixed不感冒，而FF和IE7則能識別），所以基於這兩種類別瀏覽器模式進行考慮。

對於FF、IE7這種能識別position:fixed的瀏覽器，則把下面的佈局div（content）使用fixed，使其能固定在上面div（header）的下面。

對於IE6，則通過設置html的padding使其在頁面的上面空出一固定高度的填充，同時讓div（header）固定的覆蓋上面的填充。最後在網頁中讓div（content）完全覆蓋body部分，並隨着body的高寬自動調整。

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

ssm根據pdf模板導出pdf

一、使用word設計pdf模板，並另存爲pdf格式的文件。 二、使用Adobe Acrobat DC工具，打開pdf文件，工具中選擇準備表單並打開 三、在文件中設置域名稱，如下圖 四、下面是正式的操作 pom依賴 <!-- 生成P

LVAmber 2020-07-08 12:00:10

給ASP.NET MVC及WebApi添加路由優先級

這是一個對Asp.Net Mvc的一個很小的功能拓展，小項目可能不太需要這個功能，但有時候項目大了註冊的路由不生效時你應該要想到有可能是因爲路由順序的原因，這時這個路由優先級的功能有可能就會給你帶來便利。 一、爲什麼需要路由優先級

gigizhui 2020-07-08 11:54:27

HTML5入門之常用標籤

html5標準網頁聲明 <!DOCTYPE html> 必要結構 <html > <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>

blackcatkiller 2020-07-08 10:51:12

除了自動化訪問性測試，我還對構建的頁面做的六件事

本文翻譯自《Beyond automatic accessibility testing: 6 things I check on every website I build》。如有翻譯不當之處，請不吝指正。 我剛對客戶端完成一次

风萧萧梦潇 2020-07-08 10:22:22

筆記：jdk 1.8 使用switch報錯:Incompatible types. Found: ‘java.lang.String‘, required: ‘byte, char, short o

今天我在使用idea開發Java的時候發現，jdk1.8使用switch報錯，Incompatible types. Found: 'java.lang.String', required: 'byte, char, short o：

stulln 2020-07-08 08:36:20

簡單實現富文本編輯器

下載地址：http://kindeditor.net/ ssm+angular+bootstarp 一、下載 將下載的文件解壓放在項目中靜態目錄下如： 二、在數據庫中找到相應的字段，進行綁定，再調用editor.htm

stulln 2020-07-08 08:36:20

Flask學習筆記（二）瞭解框架

1.1 瞭解框架： Flask作爲Web框架，它的作用主要是爲了開發Web應用程序。那麼我們首先來了解下Web應用程序。Web應用程序 (World Wide Web)誕生最初的目的，是爲了利用互聯網交流工作文檔。 HTTP請求過

还算小萌新？ 2020-07-08 08:28:41

koa應用的部署

koa應用的部署 koa2項目的簡單創建到服務器的部署， 本例使用centos。 創建koa2項目 npm install -g koa-generator npm start 是 npm run start npm stop

这魏先森 2020-07-08 08:25:02

自定義標籤2&簡單標籤

       由於傳統標籤使用三個標籤接口來完成不同的功能，顯得過於繁瑣，不利於標籤技術的推廣，SUN公司爲降低標籤技術的學習難度，在JSP2.0中定義了一個更爲簡單、便於編寫和調用的SimpleTag接口來實現標籤的功能。實現Simpl

祁琼冉 2020-07-08 07:54:27

隨筆——web的深入學習方向

開始階段 學習javaweb 從開始的javaSE->javaEE->框架然後就宕機了。一直坐着沒意思的CRUD。 這時候開始利用反射IO寫點自動生成工具。 然後設計數據庫，一對一關係，多對多關係，數據的類型選擇。研究業務設計。發現其實你

l清水 2020-07-08 07:38:46

Windows 系列都有那些版本?

Windows NT 各發布版本 NT版本 市場名稱 版本 發行日期 RTM Build NT 3.1 Windows NT 3.1 Workstation（僅被命名爲“Windows NT”）, Advance

qhd_whm 2020-07-08 07:03:30

JavaWeb-14-SpringMVC的簡介和Helloword

Table of Contents 一：springMVC簡介 1：是Spring實現web模塊的；簡化web開發的 2：傳統的MVC 3：springMVC下的MVC  二：springMVC的HelloWorld 1：普通web模式下

苍杲 2020-07-08 06:54:10

長度擴展攻擊詳解

這幾天在看密碼學的長度擴展攻擊，看了不少文章，感覺都說得不夠清楚，自己弄清楚之後想寫一篇，做一個記錄。 1. 簡介        長度擴展攻擊（length extension attack），是指針對某些允許包含額外信息的加密散列函數

szuaurora 2020-07-08 06:53:55

2017zctf misc300

下載題目後是個zip壓縮包，帶有密碼，本質是zip僞加密，解決方法可以是用壓縮包自帶的修復功能，或者用二進制打開工具修改zip文件頭，或者直接在linux下用binwalk –e 直接解壓 成功解壓後是幾個不熟悉的文件格式，還是用binw

szuaurora 2020-07-08 06:53:53

詳細解說IIS運用程序池以及運用程序池回收

什麼是應用程序池呢？這是微軟的一個全新概念：應用程序池是將一個或多個應用程序鏈接到一個或多個工作進程集合的配置。因爲應用程序池中的應用程序與其他應用程序被工作進程邊界分隔，所以某個應用程序池中的應用程序不會受到其他應用程序池中應用程序所產

TQY2008 2020-07-08 03:00:54