高度元素div高度自适应

最新推荐文章于 2022-06-07 12:27:08 发布

dyl_love98

最新推荐文章于 2022-06-07 12:27:08 发布

阅读量279

点赞数

文章标签：高度元素

本文链接：https://blog.csdn.net/javablogs/article/details/8897604

版权

时间紧张，先记一笔，后续优化与完善。

div高度自适应:
议建:尽可能的手写码代，可以有效的高提习学率效和深度。
由于各个浏览器的兼容性不同，致导div高度自适应成了一个比拟辣手题难，面上分析一下如何才可以让div的高度实现自适应果效。
有时候我们须要定规div的小最高度，如果内容过超这个高度的话，那么高度会随着内容自适应。看面上码代:

View Code

<!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>

以上码代中定固了div的高度为100px，如果内容的高度过超100px的话，除了在IE6下可以到达高度自适应，其他浏览器都市涌现内容溢出的景象，表现不可以到达我们想要的果效，面上就来修改一下码代。

View Code

<!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>

以上码代通过用运 !important 和 min-height 属性实现了各个浏览器都可以到达高度自适应果效。
面上都是分析的是div中都是本文内容的情况，但是还有多是div中存有子div的情况，面上单简分析一下此种情况。先看一实例:

View Code

<!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">
    .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>

以上码代中，父元素只定规了宽度没有定规高度，子元素在常正的文档流中，所以子元素可以将父元素撑开。
再看面上这一实例:

日每一道理
翻开早已发黄的页张，试着寻找过去所留下的点点滴滴的足迹。多年前的好友似乎现在看来已变得陌生，匆忙之间，让这维持了多年的友谊变淡，找不出什么亲切感，只是偶尔遇上，淡淡地微笑，如今也只能在这发黄的页张中找寻过去的那些让人难忘的，至少我可以握住这仅剩下一段的“丝线头”……

View Code

<!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">
    .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，从而脱离了文档流。如果想让面上的父元素到达高度自适应，就要除清子元素的浮动。修改码代如下:

View Code

<!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">
    .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可即除清浮动。
如果说父元素就像最开始的例子一样，定固了高度，并且还要实现高度自适应果效，就能够参阅元素中内容是本文的情况，解决方法是一样的。码代如下:

View Code

<!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">
    .parent
    {
        border:2px solid red;
        width:200px;
        height:auto!important;
        height:100px;
        min-height:100px;
    }
    .children
    {
        width:200px;
        height:200px;
        float:left;
        background-color:green;
    }
    .clear
    {
        clear:both;
    }
</style>
</head>
<body>
    <div class="parent">
        <div class="children"></div>
        <div class="clear"></div>
    </div>
</body>
</html>

原文地址: div高度自适应

文章结束给大家分享下程序员的一些笑话语录： Google事件并不像国内主流媒体普遍误导的那样，它仅仅是中国Z府和美国公司、中国文化和美国文化甚至中国人和美国人之间的关系，是民族主义和帝国主义之间的关系；更重要的是，它就是Z府和公司之间的关系，是权力管制和市场自由之间的关系。从这个意义上说，过度管制下的受害者，主要是国内的企业。Google可以抽身而去，国内的企业只能祈望特区。www.ishuo.cn