一、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. Magento 头部的演示信息去除

    进入后台: 系统-配置, 然后选择左栏的“设计”, 选择右栏的HTML头信息里面有个“Display Demo Store Notice”, 默认是yes,设置为“no”就可以了.

  2. js学习记录

    1.js语法 2.数据类型(基本类型与对象类型.类型的转换) 2.1 数字 2.2 文本 2.3 布尔值 2.4 null和undefined 2.5 对象 2.6 类型检测 3.操作符和表达式 4. ...

  3. HDU-2262 Where is the canteen 概率DP,高斯消元

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2262 题意:LL在一个迷宫里面转,每次走向周围能走的点的概率都是一样的,现在LL要随机的走到cante ...

  4. 解决dwr报错【 Error: java.lang.SecurityException: No class by name: service】

    打开包含dwr的网页时后台报错: 警告: Names of known classes are: __System DwrQueryService 十二月 11, 2015 10:24:44 上午 o ...

  5. 【C语言】-循环结构-while语句

    while语句: while循环可实现"当型"循环,即当条件成立时,执行循环体.适合无法确定循环执行次数的情况. while (表达式) { 循环语句 } 注意: 表达式为循环控制 ...

  6. unigui下载文件

    lblProduct.Caption := '<a href="files\1.t" target=new>要下载的文件名</a>';

  7. [Objective-c 基础 - 2.5] NSString

    1.NSString基本使用 使用%@占位符输出对象 ; ; NSString *str2 = [NSString stringWithFormat:@"My age is %d and n ...

  8. 使用Dropbox提高个人数据管理效率

    Dropbox 应该大家都不陌生,其在云存储阵营中独树一帜,通俗的说它是提供多终端和云之间的数据同步服务,而就其本质来说它无非是将数据的采集.存储和分发三个关节打通,整合成统一服务对外提供.这就好比只 ...

  9. 关于AS3里的Matrix3D中的appendXXX和prependXXX

    最近在看3D相关的一些基础,因为搞as3这么多年了,决定3D基础这块还是从AS3入手,3D游戏开发这块从U3D入手,扯远了,研究Matrix3D类时发现了矩阵处理转换时的一些方法均分为appendXX ...

  10. 关系数据库 范式（NF： Normal Form） 说明

    关系数据库 范式(NF: Normal Form) 说明 数据库电话insertdelete存储oracle   目录(?)[+]   一.范式概述(NF:NormalForm) 数据库的设计范式是数 ...