CSS外框高度自动适应

当有浮动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外框高度自动适应相关推荐

CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size?...
原文:CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size? 其实方法非常简单,直接写代码: &l ...
纯CSS实现侧边栏/分栏高度自动相等
一.为何要分栏高度一致? 分栏高度一致的目的是更加美观.举两个例子吧 2.1 对于分栏布局,我们或许会用边框(border)进行分隔,就如鄙人博客的分栏此时最担心的问题就是高度不一致,尤其是无边框属 ...
html网页自动铺满屏幕,HTML+CSS入门高度如何铺满全屏
本篇教程介绍了HTML+CSS入门高度如何铺满全屏,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < IE6不认识!important声明,IE7.IE8.Firefox. ...
CSS元素高度塌陷的几种常见解决办法！
同学们在进行页面布局的时候,经常会使用到float浮动进行样式控制,但如果我们没有设置父元素的高度的时候使用浮动就会导致后面的子元素出现问题,也就是高度塌陷.下面小千就给大家介绍几种常见的解决CSS高 ...
textarea宽度、高度自动适应处理方法
textarea自动高度 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http: ...
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定 ...
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧（转）
本人对前端处理不是很牛,所以转载这文章.原文地址:http://www.divcss5.com/wenji/w632.shtml DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小 ...
4行代码搞定iframe高度自动变化,完美兼容(转)
为什么80%的码农都做不了架构师?>>> 本帖转自: http://www.iteye.com/topic/839143 跨域问题 :http://ued.alimama.co ...
CSS解决高度自适应问题
CSS解决高度自适应问题参考文章: (1)CSS解决高度自适应问题 (2)https://www.cnblogs.com/zhujl/archive/2012/03/20/2408976.html ...

CSS外框高度自动适应

CSS外框高度自动适应相关推荐

最新文章

热门文章