一、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. SQL中binary 和 varbinary的区别 blob

    binary 和 varbinary固定长度 (binary) 的或可变长度 (varbinary) 的 binary 数据类型. binary [ ( n ) ] 固定长度的 n 个字节二进制数据. ...

  2. POJ1185 - 炮兵阵地(状态压缩DP)

    题目大意 中文的..直接搬过来... 司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队.一个N*M的地图由N行M列组成,地图的每一格可能是山地(用"H" 表示),也可能是平 ...

  3. 异步网页采集利器CasperJs

    在采集网页中,我们会经常遇到采集一些异步加载页面的网页,我们通常用的httpwebrequest类就采集不到了,这个时候我们通常会采用webbrowser来辅助采集,但是.net下自带的webbrow ...

  4. in和exists的区别与SQL执行效率

    in和exists的区别与SQL执行效率最近很多论坛又开始讨论in和exists的区别与SQL执行效率的问题,本文特整理一些in和exists的区别与SQL执行效率分析 SQL中in可以分为三类: 1 ...

  5. JNI-使用RegisterNatives注册本地方法

    转自: http://blog.chinaunix.net/uid-26009923-id-3410141.html 1. 以前在jni中写本地方法时,都会写成 Java_com_example_he ...

  6. hadoop安装与WordCount例子

    1.JDK安装 下载网址: http://www.oracle.com/technetwork/java/javase/downloads/jdk-6u29-download-513648.html  ...

  7. SCOM随笔

    1.在监控群集资源时,安装完agent后,在代理管理-agent属性中选中“允许此代理充当代理并发现其他计算机上的托管对象” 如果监控DC的话,也要选中该选项

  8. linux centos6 NAT 端口转发

    有很多时候我们为了安全,需要将例如数据库服务器放到内网中.但是有些时候又系统给外网开一个端口,这时就可以利用外网的服务器进行一个端口转发.今天我们以centos6 为例进行端口转发配置. 首先vi / ...

  9. Windows Phone开发-开发环境和结构

    Windows Phone 7.1的开发工具发布了,一直对WP7很关注,现在终于可以开始学习了.其实09年就学习过silverlight,看过3的SDK文档,当时因为工作,断断续续也没有坚持下来,所以 ...

  10. php throw new Excpetion()之后，程序还往下继续运行吗？

    经过测试是不会往下执行的,直接catch抛出异常了.