一、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. flappy pig小游戏源码分析(4)——核心pig模块(未完待续)

    热身之后,我们要动点真格的了,游戏叫flappy pig,我们的pig终于要出场了. 老规矩,看看目录结构,读者对着目录结构好好回想我们已经讲解的几个模块: 其中game.js是游戏主程序,optio ...

  2. Java 开发@ JDBC链接SQLServer2012

    下面请一字一句地看,一遍就设置成功,比你设置几十遍失败,费时会少得多. 首先,在连接数据库之前必须保证SQL Server 2012是采用SQL Server身份验证方式而不是windows身份验证方 ...

  3. SpringMVC学习 DispatcherServlet (转载)

    3.1.DispatcherServlet作用 DispatcherServlet是前端控制器设计模式的实现,提供spring Web MVC的集中访问点,而且负责职责的分派,而且与Spring Io ...

  4. URAL 1019 - Line Painting

    跟前面某个题一样,都是区间染色问题,还是用我的老方法,区间离散化+二分区间端点+区间处理做的,时间跑的还挺短 坑爹的情况就是最左端是0,最右端是1e9,区间求的是开区间 #include <st ...

  5. linq to sql 扩展方法

    老赵的博客:http://blog.zhaojie.me/2008/02/using-translate-method-and-modify-command-text-before-query-in- ...

  6. JAVA线程全局异常处理

    大家平时写线程很多,但可能很少关注如何捕获线程的全局异常.其实jdk提供了两种捕获全局异常的方法,一种是基于整个线程类(staticsetDefaultUnaughtExceptionHandler( ...

  7. javasctipt显示几分钟前、几天前等

    jsp页面: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...

  8. 网络防火墙实战-基于pfsense(2)

    安装虚拟机 本博客所有内容是原创,如果转载请注明来源 http://blog.csdn.net/myhaspl/

  9. Hive权限介绍

    一.开启权限 眼下hive支持简单的权限管理,默认情况下是不开启.这样全部的用户都具有同样的权限.同一时候也是超级管理员.也就对hive中的全部表都有查看和修改的权利,这样是不符合一般数据仓库的安全原 ...

  10. android的ListView做表格添加圆角边框

    边框,圆角,都可以实现的 在drawable目录下添加view_yuan_morelist.xml,设置控件的边框代码.如下: <?xml version="1.0" enc ...