外部div自适应内部标签的高度，设置最小高度、最大高度
一、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自适应内部标签的高度，设置最小高度、最大高度的更多相关文章
- HTML 的超链接 a 标签中如何设置其宽度和高度？
HTML 的超链接 a 标签中如何设置其宽度和高度? 在DIV CSS布局中,html 中 a 超链接标签,直接对其设置宽度和高度不能生效,设置宽度和高度也不起作用,这里为大家分享如何实现 a 标签宽 ...
- css中同时用头部引入和外部引入对同一个标签进行样式设置，哪一个优先级高。
这段是html中的代码 <!doctype html> <html lang="en"> <head> <meta charset=&qu ...
- vue + ElementUI 表格筛选框的高度设置，超出一定高度，显示滚动条
相信有很多小伙伴遇到过这个问题,首先还是来看图片,筛选框我做了处理,所以和官网的有点小差别 官方网站和个人网站对比图如下: 代码如下:(F12找到该元素的class,设置高度) .el-table-f ...
- ElementUI 表格表头筛选框的高度设置，超出一定高度，显示滚动条
最近项目发现一个问题table表头筛选的时候,由于筛选内容过多导致弹出框超出屏幕,并且无法滚动,应急的办法是缩小浏览器显示比例让更多内容显示
- 外部div不能包裹内部div的问题
转自http://www.du52.com/text.php?id=362 当设计网页时,如果内部div全部设置css属性float为左右浮动,那么外部div将不能包裹内部div 解决方法 1.在内部 ...
- html 和 body标签的 css 设置
个人猜测浏览器的机制:H5页面底板上有一张画布,画布高度可以被撑高.html.body等元素是固定在画布上的.浏览器中页面的滚动是跟着画布滚动的.(fixed定位是脱离这种机制的,相对浏览器窗口定位的 ...
- html 关于内部是float元素的外部div高度为0的解决方法！
最近编写一个页面的时候遇见一个问题,外部div是block的,而内部元素是float的,大家应该都知道float的元素是没有实际高度的,就算你设置了float元素的高度他也不会撑开外部block元素的 ...
- div自适应高度
div自适应高度 Div即父容器不根据内容自适应高度,我们看下面的代码: <div id="main"> <div id="content"& ...
- div 自适应高度
自适应高度 ,设置最小高度:通常情况下,没有设置高度,div默认自适应高度且无最低高度 1 div{ _height:200px; /* css 注解: 仅IE6设别此属性,假定最低高度是200px ...
随机推荐
- Android Activity 生命周期中onStart()和onResume()的区别
首先了解Activity的四种状态 Running状态:一个新的Activity启动入栈后,它在屏幕最前端,处于栈的最顶端,此时它处于可见并可和用户交互的激活状态.Paused状态:当Activity ...
- 如何使用 SPICE client (virt-viewer) 来连接远程虚拟机桌面?
如何使用 SPICE client (virt-viewer) 来连接远程虚拟机桌面? 什么是SPICE? SPICE (Simple Protocol for Independent Computi ...
- for循环中使用了return
for循环中使用了return,导致没有循环完毕就结束了整个方法的执行.
- After Android Studio update: Gradle DSL method not found: 'runProguard()'
1 具体报错为: Error:(16, 0) Gradle DSL method not found: 'runProguard()' Possible causes:<ul><li ...
- C++学习笔记（四）：枚举
枚举用来代替静态常量,优点就是可以确定值的范围,而常量则无法确定范围: 常量表示法: ; ; ; ; ; bool func(int type) { //范围检查 || type > ) thr ...
- iOS动画详解（一）
Core Graphics Framework是一套基于C的API框架,使用了Quartz作为绘图引擎.它提供了低级别.轻量级.高保真度的2D渲染.该框架可以用于基于路径的绘图.变换.颜色管理.脱屏渲 ...
- cocos2d-x 获取图片的某像素点的RGBA颜色
转自:http://www.cnblogs.com/jaoye/archive/2013/02/19/2916501.html ccColor4B c = {, , , }; CCPoint pt = ...
- JavaScript正则表达式快速判断技巧
这里是JS的正则的一点心得,并不是最完整的规则汇总,更侧重实际运用中的快速判断,初学者接触正则之后往往会被一堆星号括号给弄晕,有了一些速判技巧就能从整体上把握从而不慌乱. JS正则快速判断技巧的核心就 ...
- Codeforces Codeforces Round #319 (Div. 2) C. Vasya and Petya's Game 数学
C. Vasya and Petya's Game Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/ ...
- StageFright框架流程解读
1. StageFright介绍 Android froyo版本号多媒体引擎做了变动,新加入�了stagefright框架,而且默认情况android选择stagefright,并没有全 ...