您好！欢迎来到.Net中文社区！
[登录]
[免费注册]
[匿名投稿]
首 页
业界动态
数据库
.Net编程
Silverlight
AJAX编程
实用代码
网页标准
美工之家
热门：
网页模板
.net视频教程
JQuery
MVC
json
ExtJs
源码示例
三级联动
JQuery菜单
您现在的位置：
.Net中文社区
>>
实用代码
>>正文内容
DIV+CSS网页另类上下布局的特效代码
发布时间：2009年02月20日
点击数： 次
未知
在论坛里看到一位朋友在问一个上下2个内容框的，宽度为100%的布局方式，然后自己也就尝试了一下，发现了几个问题的存在。
先说说在尝试的过程发现的几个问题
1、盒模型问题
相信玩重构或者说是DIV+CSS的朋友应该都知道这个东西，废话不多说，不知道而有兴趣可以去网上搜索一下。这里我提到这个是因为这个布局是用百分比来控制的，所以当加对边框加上1px的边后，就不好减回来，我是舍弃了上边的边框样式。
2、溢出问题
这个问题只要对overflow做hidden就可以了，防止内容过长而溢出。刚刚开始的时候可以对html跟body的overflow加一个hidden属性。Blank 告诉我，IE默认是有滚动条的宽度（这个偶知道），而FF是没有的（这个偶就不知道了）。
基本上也就这样，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>上下层测试</title> <style type="text/css"> <!-- *{ margin:0px; padding:0px; } html,body{ height:100%; } * html, * html body { overflow: hidden; /*隐藏IE的默认滚动条的宽度*/ } #bodyDiv{ width:100%; height:100%; } #topDiv{ height:88%; background:#ccc; border:1px solid #000; overflow:auto; /*溢出的时候显示滚动条为 auto */ } #bottomDiv{ height:12%; background:#f4f4f4; border:1px solid #F00; margin-top:-4px; overflow:auto; } h3{ font-size:14px; font-weight:bold; } --> </style> </head> <body> <div id="bodyDiv"> <div id="topDiv"><h3>上面的</h3> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div> <div id="bottomDiv"><h3>下面的</h3></div> </div> </body> </html> </body> </html>
随机文章推荐
类似QQ里点连接，提示打开还是复制的效果
JS+Flash五屏焦点图
分享20个Web开发中模式弹窗应用案例
给图片加上播放按钮
纯CSS实现中英文双语 导航菜单
将网页设为浏览器首页或起始页或默认页
本站热点业务
更多
模板/案例展示
热门推荐
·
QQ经典JS相册效果【推荐】
·
jquery示例实现智能输入提示功能
·
仿QQ首页图片轮换效果
·
兼容所有浏览器经典JS图片滚动
·
CSS+JS 仿MSN TAB选项卡
·
jQuery图片相册展示插件
·
兼容性比较好且实用强大的弹出窗口
·
Javascript仿flash幻灯效果
·
纯div+css制作的向下弹出菜单【兼
·
前端效果图的jquery实现过程（左右
·
详解Tab(选项卡)的设计原则及应用
·
jQuery打造经典动态下滑菜单
·
图片伸缩放大功能，鼠标单击缩放
·
JS实现旋转展示效果【经典】
·
经典jQuery的对象切换插件
最近更新
·
比较喜欢的一种效果(原创)仿taobao
·
25个非常棒的jQuery滑块插件和教程
·
100个非常强大的CSS菜单教程指南
·
25个实用的jQuery Tooltip脚本
·
30个精美的jQuery幻灯片效果插件和
·
魅族官网的滑动导航菜单
·
超过 25 个华丽的 Web 日历组件
·
10 款很有创意的 jQuery 表格插件
·
20+ 个很棒的 jQuery 文件上传插件
·
13个超级有用的 jQuery 内容滚动插
·
13个超级有用的jQuery内容滚动插件
·
分享open-open AJAX开源项目中的几
·
30 个 jQuery 导航菜单插件和教程
·
常用JQuery插件整理
·
推荐10款非常有用的 Ajax 插件
