<!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+DIV写的，上下固定高度，中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ------------------------- 附送一个 DIV垂直居中的页面~~~
那就是左右两列怎么样实现背景高度自适应，及左边内容高于右边时，右边背景色也要和左边一样；右边内容高于左边时，左边背景色也要和右边一样； 当年为了实现这个，我在网上查过无数的文章，都没有很好的解决方案；...
DIV+CSS 网页布局第二篇：两列布局 1、宽度自适应两列布局 两列布局可以使用浮动来完成，左列设置左浮动，右列设置右浮动，这样就省的再设置外边距了。 当元素使用了浮动之后，会对周围的元素造成影响，那么就...
CSS两列布局，右侧固定，左侧自适应宽度.
自适应高度的滑动背景图片及背景图片设置技巧； ?如何解决IE6双倍边距bug； ?认识IE6、IE7特定选择器； ?margin-bottom失效情况的解决； ?将icon图标集成于一个图片文件； ?设置链接变换小图标的样式； ?一张...
2、掌握了CSSde 创建及管理方式和其中常用的属性，应用css+DIV进行页面布局的DIV标记，SPNA标记， 盒子模型，元素的定位方式，布局流程和常用的布局类型。 3、学会了应用SCC+DIV对"北京奥运混吉祥物——福娃"网站的...
DIV+CSS 网页布局第三篇：三列布局 1、宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的，只不过多了一列，只需给宽度自适应两列布局中间再加一列，然后重新计算三列的宽度，就实现了宽度自适应的三列...
两列布局中，以主列(main)是自适应宽度，子列(sidebar)是固定宽度的情形最为常见。今天就来好好探讨一下如何实现这种定宽+自适应的两列布局。 1. absolute + margin 方式 首先想到的是利用 absolute + margin 的方式...
在《CSS设计彻底研究》中对设计中常用的网页元素和布局方式都给出详细的分类和归纳，并讲解了完整的解决方法，主要包括各种导航菜单（水平的、竖直的、固定宽度的、自适应宽度的、下拉的等），Tab面板、伸缩面板和...
前言 随着大前端的发展，UI 框架层出不穷，让我们前端开发对 CSS 的能力要求变得没那么高... <div id=right>右列自适应</div> </body> css 代码： #left { float: left; width: 200px; height: 400px; ba
// 根据CSS定位，利用浮动或绝对定位，使左侧的块元素脱离常规文档流,可以与右边块元素并列 div:nth-of-type(1){ float: left; //利用浮动 // postion: absolute; //利用绝对定位 // top: 0; // left: 0; ...
需要实现横向两列布局：左列固定，右列自适应的效果，如下图： HTML代码： XML/HTML Code复制内容到剪贴板 <html> <head> <meta charset=UTF-8> <title>测试练习</title...
3.6 两列右列宽度自适应 3.7 二列固定宽度居中 3.8 三列浮动中间列宽度自适应 3.9 高度自适应 3.10 盒模型详解(.Box Model) 3.10.1 什么是盒模型 3.10.2 盒模型的细节 3.10.3 上下margin叠加问题 3.10.4 左右margin...
今天早上在阿当大侠的编写高质量前端代码群中与几位朋友一起探讨和学习了一种用div+css进行的三列（三栏）布局，而且是中间固定左右两边自适应宽度，听起来蛮有意思的。因为以前只是碰到过，左右两列固定而中间...