当有浮动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. 如何在Windows下运行linux shell脚本

    在工作中情况会在碰到linux下进行执行shell的脚本,而就会使用shell的脚本,但经常使用的Windows的系统,而想在Windows电脑中进行直接shell的脚本,而不用再进行学习其它的脚本语 ...

  2. Mybatis ResultMap Collection 复合主键

    <resultMap type="XX" id="XXMap">          <id property="id" c ...

  3. C# 泛型的简单理解(安全、集合、方法、约束、继承)

    前言 泛型允许你在编译时实现类型安全.它们允许你创建一个数据结构而不限于一特定的数据类型.然而,当使用该数据结构时,编译器保证它使用的类型与类型安全是相一致的.泛型提供了类型安全,但是没有造成任何性能 ...

  4. CCLabelAtlas的宽度为奇数时的显示bug

    遇到一个很郁闷的bug,CCLabelAtlas设置文字内容在ipad上和android上正常,就只有iphone怎么显示都不正常.后来把它宽度 + 1,然后就正常了.发现以前宽度设置为21px.23 ...

  5. 利用ViewStub来延迟加载视图

    很多情况下,我们的视图可能会随着用户的操作的不同而变化,比如一个新的页面包含多个控件,但仅仅在用户点击这个按钮后,所有的控件才能完全显示.也就是说一上来可能就显示一个控件,点击按钮后把其他隐藏的控件再 ...

  6. 深入探索 JUnit 4

    开始之前 关于本教程 引入 Java 5 注释为 JUnit 带来了显著改变,使它从一个受广大开发人员了解和喜爱的测试框架转变成了一个更为精简但却不那么为人熟知的框架.在本教程中,我将探讨 JUnit ...

  7. Protobuf 协议语言指南

    l  定义一个消息(message)类型 l  标量值类型 l  Optional 的字段及默认值 l  枚举 l  使用其他消息类型 l  嵌套类型 l  更新一个消息类型 l  扩展 l  包(p ...

  8. 用make编译openCV报错：ts_gtest.cpp:(.text._ZN7testing8internal2RED2Ev+0xf): undefined reference to 'regfreeA'

    解决方案: the cause is the google tests is looking for the generic regex.h but cmake used the regex.h fr ...

  9. HotSpot Generations

    本文主要介绍HotSpot JVM的 Generations 机制, 原文来自 Oracle 文档  Java SE 6 HotSpot[tm] Virtual Machine Garbage Col ...

  10. Newtonsoft.Json高级用法DataContractJsonSerializer,JavaScriptSerializer 和 Json.NET即Newtonsoft.Json datatable,dataset,modle,序列化

    原文地址:https://www.cnblogs.com/yanweidie/p/4605212.html Newtonsoft.Json介绍 在做开发的时候,很多数据交换都是以json格式传输的.而 ...