外部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 ...
随机推荐
- 【暑假】[深入动态规划]UVa 10618 Fixing the Great Wall
UVa 10618 Fixing the Great Wall 题目: http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=361 ...
- Node.js中的ORM
ORM2是一款基于Node.js实现的ORM框架,名字相当的霸气,算是同类框架中非常出色的一款,具体介绍请猛击:https://github.com/dresende/node-orm2 刚接触Nod ...
- Android中使用sqlite笔记
1.实现SQLiteHelper来在android中使用SQLite.代码如下,来自android官网. public class FeedReaderDbHelper extends SQLiteO ...
- LIMITS.H
/*--------------------------------------------------------------------------LIMITS.H ANSI standard i ...
- 详解Objective-C的meta-class
比较简单的一篇英文,重点是讲解meta-class.翻译下,加深理解. 原文标题:What is a meta-class in Objective-C? 原文地址:http://www.cocoaw ...
- PHP魔术变量总结
php手册里面的解释 __FUNCTION__ returns only the name of the function 返回的仅仅是函数的名称 __METHOD__ returns t ...
- VB操作Excel
在工程中添加引用:Microsoft Office 9.0 Object Library Microsoft Excel 9.0 Object Library ...
- 【WIN32进阶之路】:内存映射文件
第一章:源起 遇到一个问题,如果一个客户数据文件有2g大,客户要通过界面查询文件中的数据并用列表控件显示数据,要怎么处理这个文件才能让应用程序不会长时间无响应,客户感觉不到程序的卡顿? 第二章:解决 ...
- PowerDesigner 12.5 汉化破解完整版
PowerDesigner 12.5 汉化破解完整版 分类: ⑦ 综合 2011-08-09 14:59 2979人阅读 评论(0) 收藏 举报 破解wizardsybasetoolsshell扩展 ...
- IDF实验室-简单编程-字符统计 writeup
题目地址:http://ctf.idf.cn/index.php?g=game&m=article&a=index&id=37 网站:http://ctf.idf.cn/gam ...