div高度自适应
第一种：php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>蚂蚁部落</title>
<style type="text/css">
.mytest
{
width:100px;
height:100px;
border:1px solid green;
}
</style>
</head>
<body>
<div class="mytest">据英国《每日电讯报》11月30日报道，以色列安全内阁当天批准在约旦河西岸和东耶路撒冷犹太人定居点新建3000套住房，此举旨在抗议联合国29日批准给与巴勒斯坦观察员国地位。巴以和谈进程也所以蒙上巨大</div>
</body>
</html>css
第二种：html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>蚂蚁部落</title>
<style type="text/css">
.mytest
{
width:100px;
height:auto!important;
height:100px;
min-height:100px;
border:1px solid green;
}
</style>
</head>
<body>
<div class="mytest">据英国《每日电讯报》11月30日报道，以色列安全内阁当天批准在约旦河西岸和东耶路撒冷犹太人定居点新建3000套住房，此举旨在抗议联合国29日批准给与巴勒斯坦观察员国地位。巴以和谈进程也所以蒙上巨大阴</div>
</body>
</html>浏览器
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>蚂蚁部落</title>
<style type="text/css">
.parent
{
border:2px solid red;
width:200px;
}
.children
{
width:200px;
height:200px;
background-color:green;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>
以上代码中，父元素只规定了宽度没有规定高度，子元素在正常的文档流中，因此子元素可以将父元素撑开。
再看下面这一实例:安全
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>蚂蚁部落</title>
<style type="text/css">
.parent
{
border:2px solid red;
width:200px;
}
.children
{
width:200px;
height:200px;
float:left;
background-color:green;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>
从上面代码的运行能够看出，父元素并无被撑开，这个是由于子元素float属性值设置为left，从而脱离了文档流。若是想让上面的父元素达到高度自适应，就要清除子元素的浮动。修改代码以下:ui
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>蚂蚁部落</title>
<style type="text/css">
.parent
{
border:2px solid red;
width:200px;
overflow:hidden;
}
.children
{
width:200px;
height:200px;
float:left;
background-color:green;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>
以上代码经过给父元素的样式中添加overflow:hidden便可清除浮动。
若是说父元素就像最开始的例子同样，固定了高度，而且还要实现高度自适应效果，就能够参阅元素中内容是文本的状况，解决方法是同样的。代码以下:spa
- 1. div高度自适应
- 2. div自适应高度height
- 3. HTML-父类div高度自适应子类div的高度
- 4. div模拟textarea自适应高度
- 5. div自适应剩余高度，css
- 6. CSS实现div高度自适应
- 7. div 自适应高度 自动填充剩余高度
- 8. div自适应宽度
- 9. DIV默认高度且自适应高度
- 10. DIV嵌套,外层DIV高度自适应
- 更多相关文章...
- • PHP 获取图像宽度与高度 - PHP参考手册
- • 自定义TypeHandler - MyBatis教程
- • 适用于PHP初学者的学习线路和建议
- • 算法总结-广度优先算法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解决方法
- 2. Qt5.7以上调用虚拟键盘(支持中文)，以及源码修改(可拖动，水平缩放)
- 3. 软件测试面试- 购物车功能测试用例设计
- 4. ElasticSearch（概念篇）：你知道的, 为了搜索…
- 5. redux理解
- 6. gitee创建第一个项目
- 7. 支持向量机之硬间隔（一步步推导，通俗易懂）
- 8. Mysql 异步复制延迟的原因及解决方案
- 9. 如何在运行SEPM配置向导时将不可认的复杂数据库密码改为简单密码
- 10. windows系统下tftp服务器使用
- 1. div高度自适应
- 2. div自适应高度height
- 3. HTML-父类div高度自适应子类div的高度
- 4. div模拟textarea自适应高度
- 5. div自适应剩余高度，css
- 6. CSS实现div高度自适应
- 7. div 自适应高度 自动填充剩余高度
- 8. div自适应宽度
- 9. DIV默认高度且自适应高度
- 10. DIV嵌套,外层DIV高度自适应