当有浮动float时，最外框会不跟随内容的高度而高；

解决办法一：
清除浮动  clear:both

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

        *{margin:0px;padding:0px;}

        .wrap{background:red;width:1000px;margin:auto;}

        .left,.right{float:left;height:50px;}

        .left{width:960px;background:red;}

        .right{width:40px;background:green;}

        .clear{clear:both;}

    </style>

</head>

<body>

    <div class="wrap">

        <div class="left"></div>

        <div class="right"></div>

        <div class="clear"></div>

    </div>

</body>

</html>

解决办法二：
给最外框加 overflow:hidden; zoom:1;

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

        *{margin:0px;padding:0px;}

        .wrap{background:red;width:1000px;margin:auto;overflow:hidden; zoom:1;}

        .left,.right{float:left;height:50px;}

        .left{width:960px;background:red;}

        .right{width:40px;background:green;}

    </style>

</head>

<body>

    <div class="wrap">

        <div class="left"></div>

        <div class="right"></div>

    </div>

</body>

</html>

  解决办法三：
给外框加属性 content: "";display: table;line-height: 0;clear: both;

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

        *{margin:0px;padding:0px;}

        .wrap:before, .wrap:after {content: "";display: table;line-height: 0;clear: both;}

        .wrap:after {clear: both;}

        .wrap {margin: 0 auto;width: 1000px;}

        .left,.right{float:left;height:50px;}

        .left{width:960px;background:red;}

        .right{width:40px;background:green;}

    </style>

</head>

<body>

    <div class="wrap">

        <div class="left"></div>

        <div class="right"></div>

    </div>

</body>

</html>

 

CSS最小高度与自适应高度并存

div{_height:200px; min-height:200px

/* 注释：两个放置不分前后顺序，兼容所有浏览器 */}

CSS外框高度自动适应的更多相关文章

  1. 纯CSS实现侧边栏/分栏高度自动相等

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...

  2. 纯CSS兑现侧边栏/分栏高度自动相等(转)

    这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法.核心的CSS代码如下(数值不固定): margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的 ...

  3. 右边根据左边的高度自动居中只需要两行CSS就可以完成

    右边根据左边的高度自动居中只需要两行CSS就可以完成 <style type="text/css" > div{ display: inline-block; vert ...

  4. textarea宽度、高度自动适应处理方法

    textarea自动高度 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http: ...

  5. textarea 实现高度自动增长

    有时候希望textarea 能够自动调整高度来适应输入的内容 网上看到了很多解决方案,比如动态创建一个隐藏的div,当用户输入的时候将textarea的内容绑定到div,由于div的高度会自动撑开,因 ...

  6. css修改input自动提示的黄色背景

    css修改input自动提示的黄色背景 input:-webkit-autofill { background-color: #FAFFBD; background-image: none; -web ...

  7. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  8. css+js实现自动伸缩导航栏

    用css+js实现自动伸缩导航栏 需要达到的效果: 默认首页选中样式 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化 所涉及的知识点: 布局:float css: 元素状态切换(displ ...

  9. css 分栏高度自动相等

    方法2: <div class="ticket_table"> <div class="ticket_l"> <h3>全票& ...

随机推荐

  1. 咏南中间件新增MORMOT移动端演示

    咏南中间件新增MORMOT移动端演示 基于FMX,支持安卓.IOS移动端. 1)使用INDY 的HTTP控件进行查询: procedure TForm1.查询1Click(Sender: TObjec ...

  2. DELPHI新的变量的声明方法

    DELPHI新的变量的声明方法 从DELPHI 10.3.1开始支持新的变量声明方法: procedure TForm1.查询1Click(Sender: TObject); begin var ur ...

  3. C语言控制结构

    C语言流程控制 一.流程控制结构 (1)顺序结构:按书写顺序执行每一条语句. (2)选择结构:对给定的条件进行判断,根据判断结果决定执行哪一段代码. (3)循环结构:在给定条件成立的情况下,反复执行某 ...

  4. oracle监听1067错误的处理

    一,oracle监听1067错误的处理修改oracle安装目录D:\DataBase\oracle\product\10.1.0\Db_1\NETWORK\ADMIN\下的 listener.ora和 ...

  5. crm操作产品实体

    using System;     using Microsoft.Xrm.Sdk;     using Microsoft.Crm.Sdk.Messages; /// <summary> ...

  6. Chocolatey 简介（软件自动化管理工具）

    一.Chocolatey 管理Windows软件的明智方法 1.建立在技术的无人值守安装和PowerShell.建立在技术的无人值守安装和PowerShell. 2.轻松管理Windows软件的所有方 ...

  7. mongodb分布式集群搭建手记

    一.架构简介 目标单机搭建mongodb分布式集群(副本集 + 分片集群),演示mongodb分布式集群的安装部署.简单操作. 说明在同一个vm启动由两个分片组成的分布式集群,每个分片都是一个PSS( ...

  8. [转]Sqoop-1.4.4工具import和export使用详解

    FROM :http://shiyanjun.cn/archives/624.html Sqoop可以在HDFS/Hive和关系型数据库之间进行数据的导入导出,其中主要使用了import和export ...

  9. [转]php curl经典最常用的5个例子

    转自: http://www.jb100.net/html/content-22-821-1.html php curl常用的5个例子 我用php ,curl主要是抓取数据,当然我们可以用其他的方法来 ...

  10. Python 的 Flask 框架安装应用

    Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱採用 Werkzeug ,模板引擎则使用 Jinja2 ,使用 BSD 授权. Flask也被称为 " ...