<!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>DIV+CSS左右两列自适应高度的方法-HTMer</title>
<style type="text/css">
/*
外层一定要有overflow:hidden;
左右两列，哪列短，其样式就需要加上margin-bottom:-9999px;padding-bottom:9999px;
给外层元素加上：position：relative；（在ie6,7,8中，当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。给父元素加上position：relative）
*/
.main{width:502px;overflow:hidden; border-bottom:1px solid #000; border-top:2px solid #000; position:relative;}
.left{width:100px;background-color:#0CC;float:left; border-left:1px solid #000;}
.right{width:400px;background-color:#F00;float:left;margin-bottom:-9999px;padding-bottom:9999px; border-right:1px solid #000}
</style>
</head>
<body>
<div class="main">
<div class="left">左侧内容1<br />左侧内容2<br />左侧内容3左侧内容1<br />左侧内容2<br />左侧内容31</div>
<div class="right">右侧内容1<br />右侧内容2<br />右侧内容3</div>
</div>
</body>
</html>
相关推荐
在CSS样式表中，我们可以为每个栏定义背景色、高度和宽度，如：#left {width: 160px; float: left;}。 然而，IE6浏览器存在一个著名的bug，即3像素bug。当一个浮动元素紧邻一个非浮动元素时，IE6会在两者之间插入3...
CSS左右两列自适应高布局是一种网页布局技术，用于创建一个由左右两部分组成的页面布局，且这两列的高度能够自动调整以匹配最高的列，无论内容多少。这种布局对于创建对称的页面结构非常有用，例如双栏式布局，一侧...
"2列左窄右宽高度自适应且未知高度底部平齐CSS模板"是一种常见的网页布局方式，这种布局通常用于创建内容丰富的网站，其中左侧栏提供导航或侧边信息，右侧栏展示主要内容。下面将详细介绍这种布局的实现原理和相关...
CSS+DIV写的，上下固定高度，中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ------------------------- 附送一个 DIV垂直居中的页面~~~
- 块级布局（Block Layout）：元素默认占据一整行，高度自适应，适用于设置宽度的布局。 - 行内布局（Inline Layout）：元素按顺序排列，宽度由内容决定，适用于文本和小图标。 - 浮动布局（Float Layout）：使用...
- 创建常见的网页布局，如两列布局（固定宽度+自适应宽度）、三列布局（圣杯布局、双飞翼布局）等。 - 优化导航栏、轮播图、悬浮按钮等常见组件的Div+CSS实现。 以上是Div+CSS布局大全中涉及的核心知识点，掌握...
【网页一行两列背景自适应】的实现是一个经典的CSS布局挑战。在网页设计中，有时候我们需要将页面主体分为左右两栏，每栏拥有不同的背景颜色，同时要求这两栏的背景高度能够随着各自内容的多少自动调整，保持一致。...
在网页设计领域，`DIV+CSS`布局是构建网页...这个压缩包中的练习可能包括创建各种布局示例，如两列布局、三列布局、头部导航、页脚布局等，通过这些实例，学习者可以深入理解`DIV+CSS`布局的工作原理，并提高实践能力。
《深入理解DivCSS：构建网页布局的艺术》 在网页设计领域，HTML与CSS是不可或缺的基础技术，而DivCSS则是HTML布局的重要组成部分。本篇将基于提供的资料“DivCSS.rar”中的“DivCSS.pdf”，深入探讨DivCSS的核心...
在文件名为"W3CSS.COM"的压缩包中，可能包含了一些示例代码，用于展示如何使用DIV和CSS实现各种常见的网页布局，例如：两列布局、三列布局、自适应布局等。这些实例可以帮助开发者更好地理解和掌握Web标准下的DIV + ...
`DIV+CSS`模板的源码可以帮助开发者了解如何使用`CSS`控制页面元素的排列、对齐、尺寸、颜色、边距等，以及如何通过`DIV`实现复杂的多列布局、自适应设计等。 在50个`DIV+CSS`模板的列表中，我们可以期待各种各样的...
《深入理解Div+CSS布局：构建网页布局的艺术》 在Web开发领域，Div+CSS布局是构建网页结构的基础，对于初学者来说，掌握这一技术至关重要。Div（Division，分隔）是一个HTML元素，用于对网页内容进行区域划分，而...
CSS两列布局是指在一个容器中，左侧和右侧各占据一部分的空间，左右两侧的宽度可以是固定的，也可以是一侧固定另一侧自适应宽度。下面是CSS两列布局的示例代码： ```html <div style="width:90%; margin:0 auto;"> ...
2. 块级元素特性：Div是典型的块级元素，它默认占据一行，并可以调整宽度、高度、内边距和外边距，这使得它在构建布局时具有很高的灵活性。 3. 布局应用场景：Div常用于创建网页的主要区域，如头部、主体、侧栏和...
在网页设计领域，Div+CSS布局是现代网页开发的基础，Dreamweaver CS6作为一个强大的可视化编辑工具，提供了方便快捷的方式来实现这种布局。本教程重点介绍了如何利用Div+CSS在Dreamweaver CS6中构建网页布局，包括...