一、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. 【Spark学习】Spark 1.1.0 with CDH5.2 安装部署

    [时间]2014年11月18日 [平台]Centos 6.5 [工具]scp [软件]jdk-7u67-linux-x64.rpm spark-worker-1.1.0+cdh5.2.0+56-1.c ...

  2. HDU-4691 Front compression 后缀数组

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4691 后缀数组模板题,求出Height数组后,对Height做RMQ,然后直接统计就可以了... // ...

  3. EventBus使用小记

    自从使用了EventBus,代码干净了好多. 从此你不用startActivityForResult了,从此你不用再写注册BroadcastReceiver了,从此你不用再写一些回调了. 只需要在需要 ...

  4. SQLite 使用教程2 语法

    http://www.runoob.com/sqlite/sqlite-syntax.html SQLite 语法 SQLite 是遵循一套独特的称为语法的规则和准则.本教程列出了所有基本的 SQLi ...

  5. android studio 更改背景和设置字体大小

    1,设置字体大小 2,设置背景主题

  6. poj 2251 搜索

    Dungeon Master Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13923   Accepted: 5424 D ...

  7. Xdebug+phpstorm配置

    首先,把自己参考的网上材料的连接黏贴出来,是英文的,但是讲解的很详细,有兴趣的同学可以看一下. 1.http://blog.jetbrains.com/webide/2011/02/zero-conf ...

  8. （转）Dependency Walker使用说明

    在Windows世界中,有无数块活动的大陆,它们都有一个共同的名字——动态链接库.现在就让我们走进这些神奇的活动大陆,找出它们隐藏已久的秘密吧! 初窥门径:Windows的基石 随便打开一个系统目录, ...

  9. javascript之css常用属性

    1. position : 属性值有absolute .fixed.relative absolute:生成绝对定位的元素,相对第一父元素进行定位: fixed :   生成绝对定位的元素,相对于浏览 ...

  10. java_spring_List,Map,Properties,Set注入与遍历

    package com.dao.bean.www; import java.util.List; import java.util.Map; import java.util.Properties; ...