一、div自适应高度：在前端开发中经常需要让外层的div自动适应内部标签和内容的高度，内部标签可能是<div>、<ul>、<ol>或者文字等各种内容。造成外层的div不能自动适应内容高度的原因往往是因为内部标签设置了float属性，下面来看一下解决办法。

1.用伪对象清除float属性

 <!doctype html>

 <html lang="en">

  <head>

   <meta charset="UTF-8">

   <title>Document</title>

   <!-- CSS -->

   <style type="text/css">

     #wrap2{

         width: auto;

         height: auto;

         min-height: 250px;/*设置最小高度*/

         max-height: 500px;/*设置最大高度*/

         overflow: hidden;/*内容超出后隐藏*/

         border: 2px solid yellow;

     }

     #wrap2:after{

         content: "";

         visibility: hidden;

         display: block;

         clear: both;

     }

     #inner2{

         width: 200px;

         height: 200px;

         border: 1px solid black;

         float: right;

     }

   </style>

  </head>

  <body>

   <div id="wrap2" class="">

     <div id="inner2" class=""></div>

   </div>

  </body>

 </html>

2.用空div来清除float属性

 <!doctype html>

 <html lang="en">

  <head>

   <meta charset="UTF-8">

   <title>Document</title>

   <!-- CSS -->

   <style type="text/css">

     #wrap1{

         width: auto;

         height: auto;

         border: 2px solid yellow;

     }

     #inner1{

         width: 200px;

         height: 200px;

         border: 1px solid black;

         float: right;

     }

   </style>

  </head>

  <body>

   <div id="wrap1">

     <div id="inner1"></div>

     <div style="clear:both;"></div> <!-- 在外层div的底部加一个空的div标签，并设置样式为clear:both; -->

   </div>

  </body>

 </html>

二、给div设置最小、最大高度：

 #wrap1{

         width: auto;

         min-height: 100px;

         max-height: 500px;

         overflow: hidden;

         border: 2px solid yellow;

     }

外部div自适应内部标签的高度，设置最小高度、最大高度的更多相关文章

  1. HTML 的超链接 a 标签中如何设置其宽度和高度？

    HTML 的超链接 a 标签中如何设置其宽度和高度? 在DIV CSS布局中,html 中 a 超链接标签,直接对其设置宽度和高度不能生效,设置宽度和高度也不起作用,这里为大家分享如何实现 a 标签宽 ...

  2. css中同时用头部引入和外部引入对同一个标签进行样式设置，哪一个优先级高。

    这段是html中的代码 <!doctype html> <html lang="en"> <head> <meta charset=&qu ...

  3. vue + ElementUI 表格筛选框的高度设置，超出一定高度，显示滚动条

    相信有很多小伙伴遇到过这个问题,首先还是来看图片,筛选框我做了处理,所以和官网的有点小差别 官方网站和个人网站对比图如下: 代码如下:(F12找到该元素的class,设置高度) .el-table-f ...

  4. ElementUI 表格表头筛选框的高度设置，超出一定高度，显示滚动条

    最近项目发现一个问题table表头筛选的时候,由于筛选内容过多导致弹出框超出屏幕,并且无法滚动,应急的办法是缩小浏览器显示比例让更多内容显示

  5. 外部div不能包裹内部div的问题

    转自http://www.du52.com/text.php?id=362 当设计网页时,如果内部div全部设置css属性float为左右浮动,那么外部div将不能包裹内部div 解决方法 1.在内部 ...

  6. html 和 body标签的 css 设置

    个人猜测浏览器的机制:H5页面底板上有一张画布,画布高度可以被撑高.html.body等元素是固定在画布上的.浏览器中页面的滚动是跟着画布滚动的.(fixed定位是脱离这种机制的,相对浏览器窗口定位的 ...

  7. html 关于内部是float元素的外部div高度为0的解决方法！

    最近编写一个页面的时候遇见一个问题,外部div是block的,而内部元素是float的,大家应该都知道float的元素是没有实际高度的,就算你设置了float元素的高度他也不会撑开外部block元素的 ...

  8. div自适应高度

    div自适应高度 Div即父容器不根据内容自适应高度,我们看下面的代码: <div id="main"> <div id="content"& ...

  9. div 自适应高度

    自适应高度 ,设置最小高度:通常情况下,没有设置高度,div默认自适应高度且无最低高度 1 div{ _height:200px; /* css 注解: 仅IE6设别此属性,假定最低高度是200px ...

随机推荐

  1. WEB开发总结（持续更新。。。）

    近期开始搞搞web的东西,觉得有必要把遇到的问题总结一下,就在这里当做个笔记本吧. 1.用maven建立的web工程,在运行的时候,右键找不到“Run on server”菜单: 可以在命令提示行中, ...

  2. 说说QQ空间SEO

    其实这个话题由来已久,已经有很多大神做到QQ空间日访问量破万,甚至更多了,卖产品卖到抽筋儿. 怎么说QQ空间SEO,其实不如说QQ空间引流更合适,因为QQ空间与QQ的特殊关系,SEO貌似不是很重要,其 ...

  3. 单节点伪分布集群（weekend110）的HBase子项目启动顺序

    伪分布模式下,如(weekend110)hbase-env.sh配置文档中的HBASE_MANAGES_ZK的默认值是true,它表示HBase使用自身自带的Zookeeper实例.但是,该实例只能为 ...

  4. windows主机mysql忘记密码如何重置

    本文主要是针对mysql重置密码过程中出现“mysqld不是内部命令或外部命令”的问题而写的.网上有很多关于mysql忘记密码了如何找回的文章,但是很多说的都不够详细,特别是还要用到DOS命令,可能这 ...

  5. Java SAX DefaultHandler

    The org.xml.sax.helpers.DefaultHandler class is the base class for "listeners" in SAX 2.0. ...

  6. mssql游标demo

    declare @billIds varchar(400) declare @billId varchar(40) DECLARE c1 CURSOR FOR select top 5 SaleNo ...

  7. sizeof _countof _tcslen的比较

    sizeof ----用于计算数组或其他对象的大小,以字节为单位,含\0结束符. _countof----一个宏,用于计算数组的实际元素个数 ,含\0结束符: _tcslen----c++求数组长度的 ...

  8. [置顶] 【cocos2d-x入门之五】导演类CCDirector

    原创作品,转载请标明:http://blog.csdn.net/jackystudio/article/details/12646337 既然cocos2d-x都帮我们封装好了,使得开发与平台无关,那 ...

  9. Java中3DES加密解密与其他语言(如C/C++)通信

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  10. 从零开始学android-一行两个按钮居中 布局

    方法一: <RelativeLayout android:id="@+id/relativeTop" android:layout_width="fill_pare ...