一、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. HTML5学习之FileReader接口

    http://blog.csdn.net/zk437092645/article/details/8745647 用来把文件读入内存,并且读取文件中的数据.FileReader接口提供了一个异步API ...

  2. Linux PHP实现仿百度文库预览功能

    1.安装openoffice: tar zxvf OOo_3.3.0_Linux_x86-64_install-rpm-wJRE_zh-CN.tar.gzcd RPEMrpm -ivh *.rpm安装 ...

  3. Java实现在访问者模式中使用反射

    集合类型在面向对象编程中很常用,这也带来一些代码相关的问题.比如,“怎么操作集合中不同类型的对象?” 一种做法就是遍历集合中的每个元素,然后根据它的类型而做具体的操作.这会很复杂,尤其当你不知道集合中 ...

  4. AT指令

    AT+CMGF=0  初始化 AT+IPR=115200 AT+CPAS   查询工作状态,0:可以接受AT指令,1:不能接受AT指令 ATA  应答本次电话 ATSO=2 设置2秒后自动应答 ATS ...

  5. SQLite DBHelp

    c#连接SQLite SQLite这个精巧的小数据库,无需安装软件,只需要一个System.Data.SQLite.DLL文件即可操作SQLite数据库.SQLite是一个开源数据库,现在已变得越来越 ...

  6. eclipse jetty启动内存溢出

    一.eclipse jetty启动内存溢出, 异常信息 Exception in thread "ConfigClientWorker-Default" java.lang.Out ...

  7. centos7 挂载ntfs移动硬盘

    第一步:下载安装rpmforge ,下载地址 http://pkgs.repoforge.org/rpmforge-release/  安装 rpm -ivh rpmforge-release-0.5 ...

  8. IOS设置button 图片 文字 上下、左右

    [btn setImage:imgNor forState:UIControlStateNormal]; [btn setImage:imgSel forState:UIControlStateSel ...

  9. MyEclipse与Mysql数据库的连接

    1.载入MySql驱动程序 Class.forName("com.mysql.jdbc.Driver");    // 载入MySql驱动程序 2.建立Connection连接对象 ...

  10. oracle查找重复记录

    SELECT *FROM t_info aWHERE ((SELECT COUNT(*)          FROM t_info          WHERE Title = a.Title) &g ...