当有浮动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. frame与bounds的区别比较

    翻译文档上的
bounds是指这个view在它自己坐标系的坐标和大小 而frame指的是这个view在它superview的坐标系的坐标和大小
区别主要在坐标系这一块.

很明显一个是自己为原点的坐标 ...

  2. C#编程小结----集合的小小总结

    集合的小结 以上文章介绍了如何处理不同类型的集合,数组的大小是固定的,但可以使用列表作为动态增长的集合.队列以先进先出的方式访问元素.栈以后进先出的方式访问元素.链表可以快速的插入和删除元素,但搜索操 ...

  3. python测试开发django-30.发送附件EmailMessage

    前言 Django的 send_mail() 和 send_mass_mail() 函式事实上是对 EmailMessage 类使用方式 的一个轻度封装.send_mail() 和相关的其他封装函式并 ...

  4. Java从网络批量读取图片并保存至本网站服务器后再插入文章中

    先来看效果: 查看一下系统操作日志 删除

  5. LuaJit转义的问题

    之前在项目中,处理类似!30转为表现的字符串时,有人写了这样的一段代码"\![1-2][0-9]",当换成luajit时启动报错了,出错原因在于转义字符使用不对.在很多语言中,正则 ...

  6. [Web 前端] CSS 盒子模型，绝对定位和相对定位

    cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...

  7. docker logs－查看docker容器日志

    只限制最后100条的日志,并持续更新日志显示 docker logs -f --tail= CONTAINER_ID docker logs -f --tail CONTAINER_ID   http ...

  8. 修改VIM恶心的注释自动格式化

    我复制一段代码,里面有// 只有一行,但是复制到vim中就下面全部都有//了.我要取消这个功能 vim ~/.vimrc set nu! "set formatoptions=croql 这 ...

  9. linux 比较两个文件夹不同 (diff命令, md5列表)

    比较文件夹diff,可以直接使用diff命令 [root@~]# diff -urNa dir1 dir2 -a Treat all files as text and compare them li ...

  10. 《UNIX环境高级编程》笔记--环境变量

    ISO C定义了一个函数getenv,可以用其取环境变量值. #include <stdlib.h> char* getenv(const char* name); //返回与name关联 ...