主要原理：
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>
分享到：
相关推荐
在这个主题"CSS：Div高度、宽度自应等技巧演示文件集合"中，我们将深入探讨如何通过CSS使Div元素的高度和宽度根据内容自动调整，以及实现响应式布局的一些关键技巧。 首先，了解Div的基本概念至关重要。Div是一个...
在网页设计中，"DIV自动适应高度"是一个关键的...综上所述，"DIV自动适应高度"是一种实用的网页布局技巧，通过CSS新布局模型或JavaScript可以实现。理解并掌握这一技术，能够帮助开发者创建更加灵活、美观的网页界面。
div+css高度自适应网页布局，子div含float，父div高度自适应，已经通过测试的浏览器：ie6、ie7、ie8、火狐、Chrome。 代码来源： http://www.positioniseverything.net/articles/onetruelayout/equalheight
"JQ控制两DIV高度自动相等"这个话题就是关于如何使用JavaScript库jQuery来实现这一功能。这里我们将深入探讨如何实现这个效果，以及涉及到的相关知识点。 首先，我们有两个主要的HTML元素，即两个`div`，它们的初始...
### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中，实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说，这相对容易实现。但对于那些高度未知或者动态变化的元素，尤其是嵌套在另一个未知...
本文将深入探讨如何利用`div+css`技术实现高度自适应，并通过具体的代码示例来帮助读者更好地理解和应用这一技巧。 #### 二、基础知识回顾 在开始之前，我们先简单回顾一下`div`和`css`的基础概念： 1. **HTML中...
首先，"common.css"文件通常包含项目中通用的样式规则，这些规则会被多个页面共享，以保持整体设计的一致性。例如，它可能定义了全局的字体设置、颜色方案、链接样式以及布局相关的元素，如导航栏、页脚和容器的样式...
首先，`DIV+CSS`导航栏的基本结构通常包括多个`<div>`元素，每个`<div>`代表导航栏的一个链接或功能区。这些`<div>`可以嵌套或者并排排列，通过CSS设置样式，如宽度、高度、背景色、边框等，来实现不同样式的导航栏...
这其实是我的期末作业，上传到网上是为了造福广大计算机专业的同学们∠( ᐛ 」∠)＿ 网页共分为五个子网页，分别为...编写网页前后共花费了我一个多星期的时间，希望能对大家有所帮助 祝大家期末不挂科(ง •̀_•́)ง
这种技术将多个小图标合并到一个大图中，然后通过CSS定位显示需要的部分，从而减少了网络请求次数，提高了页面加载效率。 **一、CSS Sprite的原理** 1. **合并图像**：将网页中分散的小图标（如按钮、导航条、社交...
大麦内部版抢购脚本8.5.0是一个基于JavaScript的自动抢票脚本，使用了UserScript语法并且整合了jQuery库来实现自动提交订单的功能。 知识点1：UserScript语法 UserScript是一种特殊的JavaScript脚本，它可以在...
### 新手学习DIV+CSS难点之经验总结 #### 一、网页居中显示 要实现网页居中显示，需要从两个方面入手：一是对`body`进行设置，二是对外层的`div`进行设置。 **CSS示例代码：** ```css body { margin: 0 auto; /*...
在网页设计中，布局是至关重要的一个环节，而“父DIV自动适应子DIV高度”是一个常见的需求，尤其在响应式设计和动态内容加载时。这个主题涉及到CSS布局、盒模型理解以及动态高度处理等多个知识点。 首先，我们来...
3. **底部平齐**：无论哪一列内容多，另一列都将与其底部对齐，保持整个布局的整齐感。 4. **头部、导航和尾部**：除了主要的两列内容，还有头部（Header）、导航（Navigation）和尾部（Footer）等其他页面元素。 ...
DIV+CSS是一种常见的网页布局方法，它将网页的结构（内容）与样式（外观）分离，使得网页设计更加灵活且易于维护。在HTML中，`<div>`元素是一个通用容器，可以容纳其他HTML元素，通过CSS来控制`<div>`的样式，实现...
Table2CSS是一款可以将表格布局网页完美转换 成DIV+CSS方式的软件。 支持外部CSS,支持网页及目录批量转换。 Table2CSS在线演示视频：(演示视频为英文版本，软件为中文版本) http://www.table2css.com/demo-video ...
在网页设计中，"DIV+CSS上下左右绝对居中"是一个常见的布局需求，尤其是在构建响应式网站时。这个主题涉及到CSS（层叠样式表）的布局技巧，它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...
在构建现代网页设计时，`DIV` 和 `CSS`（层叠样式表）是不可或缺的工具，它们共同为网页提供了一种优雅、高效且可维护的布局方式。本教程将深入探讨如何使用 `DIV+CSS` 美化网站，以实现更优美的视觉效果和更高效的...
第二天 一列布局 第三天 二列和三列布局 第四天 纵向导航菜单及二级弹出菜单 第五天 超链接伪类 第六天 html列表 第七天 横向导航菜单 第八天 下拉及多级弹出菜单 第九天 CSS表单设计 第十天 div+css网页标准...
浮动是CSS中一种早期的布局方式，通常用于创建多列布局。在标题中提到的代码片段中，`#tabsF ul` 使用了 `float:left` 来实现左侧对齐，但若要实现右对齐，我们可以将这个值改为 `float:right`。这样，包含在 `<ul>...