(div+css)上面固定下面自适应页面布局的实现（FF,IE)

最新推荐文章于 2024-04-18 15:26:45 发布
最新推荐文章于 2024-04-18 15:26:45 发布
阅读量4.7k 收藏 3
点赞数
分类专栏： web div+css 布局 文章标签： ie div css header 浏览器 测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gxmark/article/details/2956666
版权
web 同时被 3 个专栏收录
4 篇文章 0 订阅
订阅专栏
div+css
2 篇文章 0 订阅
订阅专栏
布局
2 篇文章 0 订阅
订阅专栏
  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的高宽自动调整。

gxmark
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div左边固定、右边自适应 和 上边固定、下边自适应
岩小黑的专栏
01-07 3304
在网页设计中，我经常遇到div一边固定、一边自适应的需求，在学习了关于CSS的一些书籍和网上的一些案例后，总结了两个例子，以便应对以后的不时之需。话不多说，直接看代码。 第一个，是div左边变化，右边固定的代码： #header,#footer { width:100%; height:1
JS+css 图片自动缩放自适应大小
01-19
我加了css的限制： 代码如下:div img {}{max-width:600px;width:600px;width:[removed]document.body.clientWidth>600?”600px”:”auto”);overflow:hidden;}◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大...
DIV 布局之上下布局上不动下自动适应
10-27 6179
1. 初始化 三个div：parent 、top、bottom parent：宽600px、高450px、红色背景、整体采用相对定位。 top：浅蓝色背景 bottom：土黄色背景 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;...
css上边固定，下面自适应布局
weixin_34161064的博客
08-27 2598
&lt;html&gt; &lt;head&gt; &lt;style&gt; * { padding:0; margin:0; } html,body { height:100%; width:100%; } .wrap { display:flex; flex-direction:column; } .left { ...
CSS之布局系列--上中下布局(上下固定，中间自适应)--方法/实例
IT利刃出鞘的博客
11-28 7670
本文用示例介绍CSS三行布局的方案。 三行布局，即：上、中、下。有两种方案：1.上下固定，中间自适应；2.中间固定，上下自适应。本文介绍第1种方案。 两边固定，中间自适应，一共有如下几种方案： flex布局（推荐） 网格布局（grid) vh+calc() 表格布局（table）（不推荐） 绝对定位布局（不推荐） 上下固定，中间自适应，就意味着中间要占满。所以大部分方案中，其父元素都要设置：height: 100%
父级div高固定 子级两个div上下 上边div高固定 下边自适应
叶情的专栏
12-01 5318
.container{ position: relative; width: 200px; height: 600px; border: 1px solid red; } .left{ width:100%; height:200px; background: gray; } .right{ position: absol
CSS min-height IE6、IE7、FF下DIV自适应高度
01-21
在DIV的CSS中加入这句：min-height:200px;height:auto; 这样在高度超过200px之后 ie6 7 ff下高度都能自适应
CSS+DIV布局(满屏自适应三行布局,兼容FF,div垂直居中)
07-13
CSS+DIV写的，上下固定高度，中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ------------------------- 附送一个 DIV垂直居中的页面~~~
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....
常用css上下布局-上边高度固定，下边高度自适应
boy火巨的博客
11-09 2290
 上下两个盒子，上边的固定，下面的自适应 &lt;div class= "container"&gt; &lt;div class="left"&gt;&lt;/div&gt; &lt;div class="right"&gt;&lt;/div&gt; &lt;/div&gt; &lt;style&gt; .con
html上下固定中间自适应div+css布局
09-03
html5新标签使用header、footer、nav、section布局，css设定及使用方法
html上下布局，上方高度固定，下方高度自动填满
热门推荐
心生的小鱼专栏
03-29 1万+
要实现如下图所示的布局： 说明：这种页面布局十分常用，上方为固定高度，下方自动填满下方高度；下方左侧为固定宽度，下方右侧自动填满剩余宽度。 &lt;style&gt; html, body { height: 100%; padding: 0; margin: 0; } .outer { height: 100%; position: relative; } .A { height: 1...
上面固定下边自适应布局
weixin_30932215的博客
08-18 301
<!DOCTYPE HTML><html><head><meta charset="gb2312"><title>头尾固定中间高度自适应布局</title><style>html, body { height:100%; margin:0; padding:0}#dHead { height...
CSS左边宽度固定,右边自适应或者上面宽度固定,下面宽度自适应 ---------calc()方法
玉林路扛把子
06-08 925
自己对css3不是很熟悉,之前竟然没有发现css里面也有类似js的计算高度的方法,今天偶然机会看到,特记录下来,涨涨记性 #div1 { width: calc(100% - 300px);//加入左边为300,右边div1则为100%-300px } 主要用于自适应屏幕宽度高度的一些要求,一句话搞定...
上下Div固定，中间div高度自适应（随浏览器高度变化而变化）
路在路上的博客
10-03 1万+
1.css代码： html,body{ margin:0; padding:0; height:100%; overflow:hidden; } #top{ position:absolute; top:0; left:0; background-color:#05C020; height:50px; width:100%; z-index:100; } #bottom{
上盒子固定 下面自适应高度
renlzrz的博客
11-06 1115
&lt;style&gt; html, body { height: 100%; padding: 0; margin: 0; } .outer { height: 100%; position: relative; } .A { height: 100px; background: #BBE8F2; } .B { background: #D9C666; width: 100%; positio...
CSS显示模式
最新发布
小何代码咖啡馆
04-18 963
元素显示模式就是元素（标签）以什么方式进行显示，比如自己占一行，比如一行可以放多个。当网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局网页。
div+css 横向滚动公告 自适应公告长度
06-02
要实现自适应长度的横向滚动公告，可以使用CSS3的flex布局和marquee标签。具体步骤如下： 1. 使用一个div元素作为容器，设置宽度为100%、高度为固定值，并且设置overflow属性为hidden，使内容超过div大时被隐藏。 2. 在div容器内部创建一个ul元素，并使用CSS3的flex布局，设置flex-wrap属性为nowrap，使ul元素内部的li元素无法换行。 3. 对ul元素设置white-space属性为nowrap，使ul元素内部的文本不换行。 4. 对li元素设置display:inline-block，使li元素能够在一行内显示。 5. 使用marquee标签来实现横向滚动的效果，并将marquee标签内部的内容设置为ul元素。 6. 通过CSS3的media query来实现不同屏幕尺寸下的适配。 下面是示例代码： HTML代码: ``` <div class="notice-container"> <marquee behavior="scroll" direction="left"> <ul class="notice-list"> <li>第一条公告信息</li> <li>第二条公告信息</li> <li>第三条公告信息</li> <li>第四条公告信息</li> <li>第五条公告信息</li> <li>第六条公告信息</li> <li>第七条公告信息</li> </ul> </marquee> </div> ``` CSS代码: ``` .notice-container { width: 100%; height: 50px; overflow: hidden; } .notice-list { display: flex; flex-wrap: nowrap; white-space: nowrap; } .notice-list > li { display: inline-block; } @media screen and (max-width: 768px) { .notice-list > li { font-size: 12px; } } @media screen and (min-width: 768px) and (max-width: 992px) { .notice-list > li { font-size: 14px; } } @media screen and (min-width: 992px) { .notice-list > li { font-size: 16px; } } ``` 通过上述步骤，就可以实现一个自适应长度的横向滚动公告了。可以根据需要调整容器的高度、文本的字体大小、marquee标签的滚动速度等参数来适应不同的场景。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值