主要原理：
1、两栏或者多栏放置于父窗口（这个是多栏必备的，有点废话）
2、 父容器overflow: hidden（这一条，在IE6和IE7上作用不明显）
3、两栏使用padding-bottom和margin-bottom一正一负相抵，拉抻比较短的那一栏。
示例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
#wrap{
overflow: hidden;
width:500px;
background:#F00;
}
#sideleft{
width:200px;
float:left;
background:#0F0;
}
#sideright{
width:300px;
float:right;
background:#FF0;
}
#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
#bottom
{
width:500px;
background:#05F;
}
</style>
</HEAD>
<BODY>
<div id="wrap">
<div id="sideleft">
1这边内空较多<br/>
1这边内空较多<br/>
1这边内空较多<br/>
1这边内空较多<br/>
1这边内空较多<br/>
1这边内空较多<br/>
1这边内空较多<br/>
1这边内空较多<br/>
</div>
<div id="sideright">
2
</div>
</div>
<div id="bottom">这是底部
</div>
</BODY>
</HTML>
分享到：
相关推荐
管理页面设计: 演示： http://www.websjy.com/club/websjy_index/div_css_js/1249562629_61040268/index.htm http://www.websjy.com/club/websjy_index/div_css_js/1249562930_99810268/ ...
管理页面设计: 演示： http://www.websjy.com/club/websjy_index/div_css_js/1249562629_61040268/index.htm http://www.websjy.com/club/websjy_index/div_css_js/1249562930_99810268/ ...
因为从这个题目我们可以更加容易的看出，如果您没有闭合(清除)浮动元素，它将造成的后果是—–div的高度不能自动增加。言归正传目前用来清除“闭合(清除)浮动”的方法，主要是一下四种：1.额外标签法这种方法就是向...
这是一个div+css网站静态模板，演示地址：http://www.yangqq.com/ceshi/gayg/index.html （喜欢就下吧） 政府网站模板下载地址： http://download.csdn.net/source/3461634 此为静态模板，含时间（农历）显示，二级...
div+css高度自适应网页布局，子div含float，父div高度自适应，已经通过测试的浏览器：ie6、ie7、ie8、火狐、Chrome。 代码来源： http://www.positioniseverything.net/articles/onetruelayout/equalheight
div+css基础笔记。web开发前端页面编写，基础篇。视频资源来源泰牛程序员html+css基础。
经典css网站导航代码： 代码： <a href="http://www.qih8.com" id="curTab" class="nav" onclick="changeId('curTab',this)">首页</span></a> <div></div> <a href="http://...
内嵌方式就是将CSS代码写在<head></head>之间，并且用<style></style>进行声明，例如： <!DOCTYPE ...
blog地址:http://blog.csdn.net/wlmnzf/article/details/47252755
css sprite 雪碧图生成小程序,已在github上开源，地址：https://github.com/iwangx/sprite
本CSS教程提供了两种对齐方式即垂直居中对齐和底端对齐！更多内容请参考本站的CSS视频教程。 CSS使图片垂直居中的代码： <!DOCTYPE ...
Predefined CSS Classes Credits: jvectormap: http://jvectormap.com/ jQuery slimScroll: http://rocha.la/jQuery-slimScroll flot charts: http://www.flotcharts.org/ fullcalendar ...
大学生网页设计至做作业成品，dreamweaver/frontpage网页大作业，大学生课程设计，中学生网页制作作业作品模板免费下载。http://wy.yilushang.net
该工具可按指定的方案合并、压缩dojo或符合dojo规范的js文件、压缩css文件。 使用方便,无需安装配置, 下载置入dojo源码下的任意目录即可一键完成打包压缩. 该工具可自动分析HTML文件生成打包方案,自动排除没有用到的...
使用方法： 将javaee.jar 复制到C:\Program Files\Genuitec\Common\plugins\com.genuitec.eclipse.j2eedt.core_8.6.1.me201010211225\data\libraryset\EE_5 这个目录将原有的覆盖，重启下服务就OK了。（myeclipse...
div+css高度自适应div+css高度自适应div+css高度自适应div+css高度自适应
div+css实现bookstore div+css实现网上书店网页div+css实现网上书店网页
接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容： <!DOCTYPE ...
更多详细，请见： http://hi.baidu.com/xpnew/blog/item/3504685973c9cf2d2934f07e.html
制作div+css带箭头的新闻list模块 .list li span{ float: right;/*使span元素浮动到右面*/ text-align: right;/*日期右对齐*/ padding: 6px 0px 4px 15px; font-size:13px; } .list li a:hover{ color: #...