我们在用DIV+CSS布局网页的时候，必然会遇到左右两列自适应高度的问题，就是左边列的背景会随着右边列内容的增加也相应的增加高度，下面就教大家DIV+CSS左右两列自适应高度的方法。

下面给出最终的效果图：

具体代码如下所示：

<!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">
.main{width:500px;overflow:hidden;}
.left{width:100px;background-color:#0CC;margin-bottom:-9999px;padding-bottom:9999px;float:left;}
.right{width:400px;background-color:#F00;float:left;}
</style>
</head>
<body>
<div class="main">
    <div class="left">左侧内容1</div>
    <div class="right">右侧内容1<br />右侧内容2<br />右侧内容3</div>
</div>
</body>
</html>

说明：其实解决DIV+CSS左右两列高度自适应的方法就是要注意两点：一是在最外层加上overflow:hidden，然后在左边列加上margin-bottom:-9999px;padding-bottom:9999px;即可。

DIV+CSS左右两列自适应高度的方法的更多相关文章

  1. div+css 左右两列自适应高度 ，以及父级div也跟着自适应子级的高度（兼容各大浏览器）

    <style type="text/css" media="screen"> <!-- #main {width:500px;_height: ...

  2. 典型的DIV CSS三行二列居中高度自适应布局

    如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) ...

  3. css布局: 两栏 自适应高度

    只使用css实现 有两种方式, 一种是通过相对定位,再绝对定位获取父亲元素的高度, 一种是通过margin-bottom:-999em;padding-bottom: 999em; 父亲元素超出隐藏 ...

  4. css 两列自适应布局的4种思路

    前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和gri ...

  5. 子级用css float浮动 而父级不能自适应高度解决方法

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...

  6. css两列自适应布局的多种实现方式及原理。

    两列布局是非常常见的需求在实际项目中,实现的方式也有很多.究其原理也都不算复杂.这里主要提出几种实现方式和原理. html页面基本布局如下代码所示: 1 <div class="mai ...

  7. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

  8. CSS实现两列布局，一列固定宽度，一列宽度自适应方法

    不管是左是右,反正就是一边宽度固定,一边宽度自适应. 博客园的很多主题也是这样设计的,我的博客也是右侧固定宽度,左侧自适应屏幕的布局方式. html代码: <div id="wrap& ...

  9. css布局 - 两栏自适应布局的几种实现方法汇总

    这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录 简 ...

随机推荐

  1. 用那啥 那啥来着Django来发送Email，结合腾讯云，批量发短信给用户！

    你们好,我是来ZB的! 这篇博客是用来发送邮件的,用的是Django框架,很好用.遗憾的是我当时用的阿里云,把腾讯QQ的端口给……给屏蔽了,啊啊啊啊,多么痛的领悟呀.后来用的163网易的邮箱.可以了! ...

  2. 【Leetcode】【简单】【14最长公共前缀】【JavaScript】

    题目 14. 最长公共前缀 编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". 示例 1: 输入: ["flower",& ...

  3. 填坑...P1546 最短网络 Agri-Net

    P1546 最短网络 Agri-Net 难度普及/提高- 时空限制1s / 128MB 题目背景 农民约翰被选为他们镇的镇长!他其中一个竞选承诺就是在镇上建立起互联网,并连接到所有的农场.当然,他需要 ...

  4. 【密码学】RSA加密 kotlin实现方法（支持任意字节长度）

    这个编辑器不支持kotlin,尴尬了···· 算了,就用Java来弄吧 val 定义常量 var 定义变量 具体kotlin的开发手册详见:http://www.runoob.com/kotlin/k ...

  5. CF135E Weak Subsequence (计数问题)

    题目传送门 题目大意:对于给定字符集大小k,求有多少个字符串满足它的最长[既是子串又是弱子序列]的长度为w: 神仙计数题 打表发现,对于字符串S而言,它的最长[既是子串又是弱子序列],一定存在一个对应 ...

  6. [luogu4285 SHOI2008] 汉诺塔 (暴力，数学)

    传送门 Solution 强行猜测公式形如\(f_i=k\times f_{i-1}+b\),暴力求\(f_1,f_2,f_3\),剩下的递推就行 Code #include <cstdio&g ...

  7. [luogu3231 HNOI2013] 消毒 (二分图最小点覆盖)

    传送门 Description 最近在生物实验室工作的小T遇到了大麻烦. 由于实验室最近升级的缘故,他的分格实验皿是一个长方体,其尺寸为abc,a.b.c 均为正整数.为了实验的方便,它被划分为abc ...

  8. mysql查询表里的重复数据

    先贴个简单的SQL语句 select username,count(*) as count from hk_test group by username having count>1; 使用详情 ...

  9. MyBatis学习总结（9）——使用MyBatis Generator自动创建代码

    一.构建一个环境 1. 首先创建一个表: [sql] view plaincopy CREATE TABLE t_user ( USER_ID INT NOT NULL AUTO_INCREMENT, ...

  10. mysql绑定多个ip地址

    http://jpuyy.com/2013/07/mysql-bind-multi-address.html mysql绑定多个ip地址 发表于2013 年 7 月 1 日 my.cnf中有选项bin ...