CSS+DIV自适应高度布局_网页制作_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

CSS+DIV自适应高度布局

作者：闵涛文章来源：闵涛的学习笔记点击数：830 更新时间：2009/4/23 13:48:05

要实现的是head foot固定，中间区域随内容高度自适应，拖动滚动条时foot永远居底。

SolarDreamStudios的方案给了我一个很好的思路，但关键部分是原创的，一直以为会比SolarDreamStudios的方案好，结果仔细看他们的代码，才发现其实原理都差不多，不过他们似乎在兼容性上下了更多工夫，具体未测试。

A. 宽度100%自适应

结构代码

<body>

<div id="head">head</div>
<div id="head_height"></div>

<div id="middle"></div>

<div id="foot_height"></div>
<div id="foot">foot</div>

</body>
表现代码
#head { width:100%; text-align:center; background:#FF9400; height:100px; position:absolute; top:0;}
  #head_height { height:100px;}
#middle { margin:20px;}
#foot { width:100%; text-align:center; background:#f00; height:100px; position:absolute; bottom:0;}
* html #foot { bottom:-1px;}
  #foot_height { height:100px;}

B. 宽度固定居中

结构代码
<body>

<div id="head">
  <div id="head_content">head</div>
</div>
<div id="head_height"></div>

<div id="middle"></div>

<div id="foot_height"></div>
<div id="foot">
  <div id="foot_content">foot</div>
</div>

</body>
表现代码
#head { width:100%; text-align:center; position:absolute; top:0; left:0;}
  #head_content { line-height:100px; width:700px; margin:0 auto; background:#FF9400; height:100px;}
  #head_height { height:100px;}
#middle { margin:20px;}
#foot { width:100%; text-align:center; position:absolute; bottom:0;}
* html #foot { bottom:-1px;}
  #foot_content { line-height:100px; width:700px; margin:0 auto; background:#f00; height:100px;}
  #foot_height { height:100px;}
测试环境IE6.0和FF1.5，IE环境下因为BUG有时会自动出现滚动条（SolarDreamStudios的方案一样），FF下为完美效果。

[网页制作]像table一样布局div  [网页制作]用GoLive实现CSS+DIV之二
[网页制作]经验共享：两年以来使用DIV排版的经验  [网页制作]MAC风格的水平导航条(DIV+CSS)
[网页制作]WEB标准教程：Div+CSS布局入门教程  [网页制作]CSS+DIV设计：Hover over下的边框变化
[网页制作]CSS+DIV实现Yahoo搜索框的制作  [网页制作]搞定CSS SPAN和DIV的区别
[网页制作]用GoLive实现CSS+DIV之一  [网页制作]DIV 居中的绝好解决方法

教程录入：mintao 责任编辑：mintao

上一篇教程： CSS+JavaScript打造超酷右键菜单

下一篇教程：高度100%的绝对定位自适应布局

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

同类栏目

· Web开发  · 网页制作
· 平面设计  · 网站运营
· 网站推广  · 搜索优化
· 建站心得  · 站长故事
· 互联动态

热门推荐

没有教程

赞助链接

闵涛博文

500 - 内部服务器错误。

您查找的资源存在问题，因而无法显示。

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18

闵涛站盟:医药大全-武穴网。A打造B、C、D……