当有浮动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. SQL 中的语法顺序与执行顺序(转)

    很多程序员都很抵触SQL.其实SQL是一整为数不多的声明性语言,只是它的运行方式完全不同于我们所熟知的命令行语言.面向对象的程序语言.甚至是函数语言. 今天大家共同学习下SQL的语法顺序与执行顺序.( ...

  2. Warning: The Copy Bundle Resources build phase contains this target's Info.plist file 'Info

    WARNING: The Copy Bundle Resources build phase contains this target's Info.plist file 'Info.plist'. ...

  3. Ubuntu 14.04 用户如何安装 VLC 2.2.0

    http://www.linuxidc.com/Linux/2014-03/98913.htm http://www.videolan.org/vlc/#download VLC 是一款自由开源.跨平 ...

  4. Windows：C:\Windows\System32\drivers\etc\hosts

    原文地址:http://zhumeng8337797.blog.163.com/blog/static/100768914201001983953188/. host是一个没有扩展名的系统文件,可以用 ...

  5. 豪斯医生第一季/全集House M.D 1迅雷下载

    豪斯医生 第一季 House M.D. Season 1 (2004)本季看点:态度无礼,表情凶恶,跛足拄着一根藤棍,永远是牛仔裤运动鞋的便装打扮而不是整洁的白大褂,普林斯顿大学附属医院的格雷戈·豪斯 ...

  6. tomcat站点配置

    那么只需要在tomcat 上下文中声明 <Parameter name=“log4j.org.springframework.orm” value=“debug”/> 1.server.x ...

  7. Nvidia驱动正确安装过程

    找到适合的正确的驱动 去nvidia驱动官网下载 卸载掉原有驱动 sudo apt-get remove –purge nvidia* 安装驱动 进入命令行界面 Ctrl-Alt+F1 给驱动run文 ...

  8. 使用Camera进行拍照 & 后台静默拍照的思路

    Android中的Camera可以用来进行自定义相机.取景框实时预览.拍照等操作.在5.0中,这个类不推荐使用了,新出了一个Camera2,那个东西没怎么研究过,反正一时半会用不到.本篇讲解的是如果用 ...

  9. 《嵌入式Linux开发实用教程》

    <嵌入式Linux开发实用教程> 基本信息 作者: 朱兆祺    李强    袁晋蓉 出版社:人民邮电出版社 ISBN:9787115334831 上架时间:2014-2-13 出版日期: ...

  10. Orchard之Module升级

    在上一篇中,我们提到了 Migrations,这一篇稍微衍生一下. 1:Migrations 是什么 Orchard 提供了模块升级的功能,即,如果我们模块发布后,需要进行升级,我们可以通过编码来实现 ...