一、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. Linux PHP实现仿百度文库预览功能

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

  2. HW6.2

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  3. JDBC注册驱动的三种方式

    JDBC注册驱动的三种方式 1.通过导入的JDBC的驱动包拿到的com.mysql.jdbc.Driver对象,利用java.sql.DriverManager对象的DriverManager.reg ...

  4. Aisino 金税盘 pass throught

  5. hdu 3617 Happy 2009

    Happy 2009 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  6. 转载sql server 关于 default value的一些使用总结

    转载原出处:http://blog.csdn.net/miqi770/article/details/6728733 1.在创建表的时候,给字段添加的默认值约束 CREATE TABLE " ...

  7. xampp配置host和httpd可以随意访问任何本机的地址

    1.修改host 不管你用的是什么系统,windows, mac,电脑上都会有一个 hosts 文件,修改这个文件,可以改变主机名所对应的 ip 地址.比如你安装了 Web 开发环境(MAMP 或 W ...

  8. C#基础知识回顾-- 反射(1)

    C#基础知识回顾-- 反射(1)   反射(reflection)是一种允许用户获得类型信息的C#特性.术语“反射”源自于它的工作方式: Type对象映射它所代表的底层对象.对Type对象进行查询可以 ...

  9. Java基础学习中一些词语和语句的使用

    在Java基础学习中,我们刚接触Java会遇到一些词和语句的使用不清的情况,不能很清楚的理解它的运行效果会是怎么样的,如:break,continue在程序中运行效果及跳转位置, 1.先来看看brea ...

  10. java线程知识点

    1. 进程与线程 一个进程拥有多个线程,多个线程共享进程的内存块.操作系统不分配新的内存,因此线程之间通信很容易.不同的进程因处于不同的内存块,因此进程之间通信较为困难. 进程:每个进程都有独立的代码 ...