(div+css)上下固定中间自适应高度网页布局的实现（FF,IE)

最新推荐文章于 2024-02-08 09:27:17 发布
最新推荐文章于 2024-02-08 09:27:17 发布
阅读量6.2k 收藏 7
点赞数
分类专栏： div+css 布局 web 文章标签： ie css div border header html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gxmark/article/details/2956716
版权
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 61px 0;/*IE6下通过设置上下的填充来给上下固定部分腾出空间*/
  12.         _border:0;      
  13.     }    
  14.      body 
  15.     {
  16.         margin:0;           
  17.         height:100%;
  18.         border:0;                
  19.     }   
  20.     #content 
  21.     {   
  22.         margin:0; /*公共*/
  23.         width:100%;
  24.         position:fixed;/*FF IE7 SF*/ 
  25.         top:61px;
  26.         bottom:61px;              
  27.         overflow: auto !important;
  28.         _position: relative;/**IE6***/        
  29.         _top:0px;        
  30.         _OVERFLOW-Y: auto; 
  31.         _OVERFLOW-X: auto; 
  32.         SCROLLBAR-FACE-COLOR: #EEEEEE;/*设置IE下滚动条颜色*/
  33.         SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; 
  34.         SCROLLBAR-SHADOW-COLOR: #919192;        
  35.         SCROLLBAR-3DLIGHT-COLOR:#ffffff;
  36.         SCROLLBAR-ARROW-COLOR: #919192; 
  37.         SCROLLBAR-TRACK-COLOR: #ffffff; 
  38.         SCROLLBAR-DARKSHADOW-COLOR: #ffffff;        
  39.         _height:100%;              
  40.     }   
  41.     #header {
  42.         position:absolute;/*公共*/
  43.         top:0;
  44.         left:0;
  45.         width:100%;
  46.         height:60px;    
  47.         border-bottom:solid 1px #AE85E1;    
  48.         background-color:#EFEFEF;       
  49.         overflow:auto !important;/*FF*/
  50.         _OVERFLOW-Y: auto;/*IE6*/ 
  51.         _OVERFLOW-X: auto; 
  52.         SCROLLBAR-FACE-COLOR: #EEEEEE;/*设置IE下滚动条颜色*/
  53.         SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; 
  54.         SCROLLBAR-SHADOW-COLOR: #919192;        
  55.         SCROLLBAR-3DLIGHT-COLOR:#ffffff;
  56.         SCROLLBAR-ARROW-COLOR: #919192; 
  57.         SCROLLBAR-TRACK-COLOR: #ffffff; 
  58.         SCROLLBAR-DARKSHADOW-COLOR: #ffffff;     
  59.     }
  60.     #footer {
  61.         position:absolute;/*公共*/
  62.         bottom:0;
  63.         left:0;
  64.         width:100%;
  65.         height:60px;    
  66.         border-top:solid 1px #AE85E1;    
  67.         background-color:#EFEFEF;       
  68.         overflow:auto !important;/*FF*/
  69.         _OVERFLOW-Y: auto;/*IE6*/ 
  70.         _OVERFLOW-X: auto; 
  71.         SCROLLBAR-FACE-COLOR: #EEEEEE;/*设置IE下滚动条颜色*/
  72.         SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; 
  73.         SCROLLBAR-SHADOW-COLOR: #919192;        
  74.         SCROLLBAR-3DLIGHT-COLOR:#ffffff;
  75.         SCROLLBAR-ARROW-COLOR: #919192; 
  76.         SCROLLBAR-TRACK-COLOR: #ffffff; 
  77.         SCROLLBAR-DARKSHADOW-COLOR: #ffffff;     
  78.     }
  79. </style>
  80. </head>
  82. <body>
  83. <div id="header">上部固定部分</div>
  84. <div id="content">
  85. <p>中部自适用部分</p>
  86. <p>设定宽度为1000px的线</p>
  87. <hr width="1000px" />
  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. <p>中部自适用部分</p>
  104. <p>中部自适用部分</p>
  105. <p>中部自适用部分</p>
  106. <p>中部自适用部分</p>
  107. <p>中部自适用部分</p>
  108. <p>中部自适用部分</p>
  109. <p>中部自适用部分</p>
  110. <p>中部自适用部分</p>
  111. <p>中部自适用部分</p>
  112. <p>中部自适用部分</p>
  113. <p>中部自适用部分</p>
  114. <p>中部自适用部分</p>
  115. <p>中部自适用部分</p>
  116. <p>中部自适用部分</p>
  117. <p>中部自适用部分</p>
  118. <p>中部自适用部分</p>
  119. <p>中部自适用部分</p>
  120. <p>中部自适用部分</p>
  121. <p>中部自适用部分</p>
  122. <p>中部自适用部分</p>　
  123. </div>
  124. <div id="footer">
  125. 下部固定部分
  126. </div>
  127. </body>
  128. </html>

在FF3和IE6下测试通过。

gxmark
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
上下固定，中间滚动布局如何实现
jean_0920的博客
09-19 1817
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
上下两端固定，中间随内容自动撑高的H5代码，达到一定高度中间内容出现滚动条
qssn的博客
07-09 823
工作上遇到的，感觉比较实用，记录一下 没超过最大高度不会有滚动条 内容超过出现滚动条 /* css代码 */ .box{ display: flex; flex-direction: column; width:400px; min-height:30vh; /* 保证最小高度 */ max-he...
上下DIV固定,中间DIV自适应的HTML+CSS实现
kurisu的咸鱼生活
04-24 7145
项目快结了，所以就做一下总结，以便以后复习。 项目主页的左侧菜单部分，界面要求就是上方为项目logo以及显示用户，下方需要显示版权，中间部分就是显示菜单选项。废话不多说，直接上代码。 HTML: CSS: .header{ position:absolute; top
几种方法实现上下固定中间自适应布局
qq_39852145的博客
02-27 2624
HTML: &lt;div class="top-center-bottom"&gt; &lt;div class="top"&gt;top&lt;/div&gt; &lt;div class="center"&gt; 视口单位(Viewport units)&lt;br&gt;
css中如何实现上下自适应,css实现上下固定中间自适应布局
weixin_28844235的博客
08-04 641
html：1：使用定位实现：css：.top-center-bottom>div{position:absolute;}.top-center-bottom .top{top:0;height:100px;width:100%;background:red;}.top-center-bottom .bottom{bottom:0;height:100px;width:100%;backgro...
h5实现布局：上下固定，中部可以上下滚动
weixin_45121510的博客
10-20 1932
第一种： 实现绿色list页面可滚动，tab页面固定 <template> <!-- 最外层div --> <div class="page page-test" style="height: 100%;display:flex;flex-direction:column"> <!-- 上 这个navbar是有高度的--> <van-sticky> <van-nav-bar class="nav-bar" left-arr
CSS min-height IE6、IE7、FF下DIV自适应高度
01-21
在DIV的CSS中加入这句：min-height:200px;height:auto; 这样在高度超过200px之后 ie6 7 ff下高度都能自适应
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 CSS：网页一行两列背景自适应
12-10
【网页一行两列背景自适应】的实现是一个经典的CSS布局挑战。在网页设计中，有时候我们需要将页面主体分为左右两栏，每栏拥有不同的背景颜色，同时要求这两栏的背景高度能够随着各自内容的多少自动调整，保持一致。...
最小高度能自适应高度IE.FF全兼容的div设置特效代码
03-20
标题 "最小高度能自适应高度IE.FF全兼容的div设置特效代码" 涉及的是前端开发中的一个常见问题，即如何在不同浏览器（尤其是IE和Firefox）中实现一个div元素的最小高度自适应其内容高度，并保持良好的兼容性。...
html上下固定中间自适应div+css布局
09-03
html5新标签使用header、footer、nav、section布局，css设定及使用方法
html滚动字幕如何向下移动,怎么用div实现页面上下部分固定,中间部分随滚动条移动而移动的代码...
weixin_34061200的博客
05-31 702
1、头部定义一个div，固定高度，设置绝对定位(position:absolute)，设置上边距(top:0);2、底部定义一个div，固定高度，设置绝对定位(position:absolute)，设置下边距(bottom:0);3、中间定义一个div，设置滚动条自动( overflow: auto); 设置绝对定位(position:absolute)，设置top和bottom，top的值等于头...
css 移动端实现头部 底部固定 中间内容滚动
包子脸爱学习的博客
06-21 3088
自己平常编码最常用到的三种方法： 方法一：flex布局 <style> *{ margin: 0; padding: 0; } .container{ display: flex; height: 100vh; flex-direction: column; } .head,.footer { height: 40px; wi
html页面自适应上下布局,网页上中下三分布局即上下固定中间自适应
weixin_34337134的博客
06-03 508
复制代码代码如下:* {margin:0;padding:0;}html,body,#box {height:100%;font:small/1.5 "宋体", serif;}body {text-align:center;}#box {text-align:left;background:#666;display:table;width:80%;margin:0 auto;position:re...
html设置层位置,div层位置固定和上下层次关系
weixin_39580727的博客
06-04 821
div层位置固定和上下层次关系2010-02-22 17:30div层位置固定和上下层次关系.fatherBox { position:relative; width:990px; margin:0 auto;}.sonBox1{ position:absolute; left:100px; top:200px; width:300px; height:50px; background-color...
上下栏固定， 中间滚动的HTML模板
weixin_33881041的博客
07-23 270
因为用position是脱离文档流的，所以在最上面嘛， 中间用overflow：auto就会出现滚动效果 代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&amp
CSS之布局系列--上中下布局(上下固定，中间自适应)--方法/实例
IT利刃出鞘的博客
11-28 7879
本文用示例介绍CSS三行布局的方案。 三行布局，即：上、中、下。有两种方案：1.上下固定，中间自适应；2.中间固定，上下自适应。本文介绍第1种方案。 两边固定，中间自适应，一共有如下几种方案： flex布局（推荐） 网格布局（grid) vh+calc() 表格布局（table）（不推荐） 绝对定位布局（不推荐） 上下固定，中间自适应，就意味着中间要占满。所以大部分方案中，其父元素都要设置：height: 100%
上下固定中间自适应布局
最新发布
华子Code1024前端菜鸟的博客
02-08 1332
上下固定中间自适应布局
div+css 横向滚动公告 自适应公告长度
06-02
要实现自适应长度的横向滚动公告，可以使用CSS3的flex布局和marquee标签。具体步骤如下： 1. 使用一个div元素作为容器，设置宽度为100%、高度为固定值，并且设置overflow属性为hidden，使内容超过div大时被隐藏。 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值