主要原理：
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 CSS 图片自动换行"是一个常见的布局技巧，它涉及到CSS（层叠样式表）中的盒模型、布局模式以及响应式设计。这个技术主要用于展示一组图片，使得图片能够在页面中自动适应并换行排列，同时还可以...
在网页设计中，"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`，它们的初始...
4. 内容区域：使用Div划分文章、图片、评论等模块，通过CSS设置间距、对齐方式以及边框。 5. 侧边栏：可包含最新文章、热门文章、分类链接等，通过CSS调整其宽度和位置。 6. 底部信息：包括版权信息、社交网络链接...
### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中，实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说，这相对容易实现。但对于那些高度未知或者动态变化的元素，尤其是嵌套在另一个未知...
本文将深入探讨如何利用`div+css`技术实现高度自适应，并通过具体的代码示例来帮助读者更好地理解和应用这一技巧。 #### 二、基础知识回顾 在开始之前，我们先简单回顾一下`div`和`css`的基础概念： 1. **HTML中...
首先，"common.css"文件通常包含项目中通用的样式规则，这些规则会被多个页面共享，以保持整体设计的一致性。例如，它可能定义了全局的字体设置、颜色方案、链接样式以及布局相关的元素，如导航栏、页脚和容器的样式...
这其实是我的期末作业，上传到网上是为了造福广大计算机专业的同学们∠( ᐛ 」∠)＿ 网页共分为五个子网页，分别为...编写网页前后共花费了我一个多星期的时间，希望能对大家有所帮助 祝大家期末不挂科(ง •̀_•́)ง
这种技术将多个小图标合并到一个大图中，然后通过CSS定位显示需要的部分，从而减少了网络请求次数，提高了页面加载效率。 **一、CSS Sprite的原理** 1. **合并图像**：将网页中分散的小图标（如按钮、导航条、社交...
大麦内部版抢购脚本8.5.0是一个基于JavaScript的自动抢票脚本，使用了UserScript语法并且整合了jQuery库来实现自动提交订单的功能。 知识点1：UserScript语法 UserScript是一种特殊的JavaScript脚本，它可以在...
首先，我们需要创建一个`<div>`作为导航栏容器，然后在其中嵌套一个`<ul>`标签，`<ul>`中包含多个`<li>`标签，每个`<li>`代表一个导航链接： ```html <div id="navbar"> <li><a href="#">首页</a></li> <li><a ...
在本篇文章中，我们将深入探讨如何使用div实现多列等高处理，以及相关的关键技术和方法。 首先，让我们了解什么是等高布局（Equal Height Layout）。等高布局是指在网页上，当有多列内容并排放置时，即使各列内容...
### 新手学习DIV+CSS难点之经验总结 #### 一、网页居中显示 要实现网页居中显示，需要从两个方面入手：一是对`body`进行设置，二是对外层的`div`进行设置。 **CSS示例代码：** ```css body { margin: 0 auto; /*...
本文将深入探讨如何使用纯JavaScript（jQuery）和CSS实现这一目标，主要参考自CSDN博主wlmnzf的文章详情页：http://blog.csdn.net/wlmnzf/article/details/47252755。 首先，我们要理解“web打印”是指通过浏览器...
在网页设计中，布局是至关重要的一个环节，而“父DIV自动适应子DIV高度”是一个常见的需求，尤其在响应式设计和动态内容加载时。这个主题涉及到CSS布局、盒模型理解以及动态高度处理等多个知识点。 首先，我们来...
3. **底部平齐**：无论哪一列内容多，另一列都将与其底部对齐，保持整个布局的整齐感。 4. **头部、导航和尾部**：除了主要的两列内容，还有头部（Header）、导航（Navigation）和尾部（Footer）等其他页面元素。 ...
DIV+CSS是一种常见的网页布局方法，它将网页的结构（内容）与样式（外观）分离，使得网页设计更加灵活且易于维护。在HTML中，`<div>`元素是一个通用容器，可以容纳其他HTML元素，通过CSS来控制`<div>`的样式，实现...
制作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: #...