第一种：

<!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下能够达到高度自适应，其他浏览器都会出现内容溢出的现象，显示不能够达到我们想要的效果，

第二种：

<!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的情况，下面简单介绍一下此种情况。先看一实例:

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

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

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

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

<!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高度自适应的更多相关文章

  1. div高度自适应（总结：min-height:100px; height:auto;的用法）

    对于div高度自适应问题,我总是用一句话:height:auto来解决. 但是很多时候我们需要的是当div内部有内容时,高度会随着内容的增加和增加,当div中没有内容时,div能够保持一个固定的高度. ...

  2. 四种方法解决DIV高度自适应问题

    本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应 关于DIV高度的自适应,一直是个让人头 ...

  3. CSS实现div高度自适应

    1.有时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-height即可解决.但是广大网民的 ...

  4. DIV高度自适应及注意问题(转)

    本文和大家重点讨论一下DIV高度自适应及注意问题,主要包括父div高度随子div的高度改变而改变和子div高度随父亲div高度改变而改变两种情况. DIV高度自适应及注意问题 积累了一些经验,总结出一 ...

  5. div高度自适应填充剩余部分

    在乐学一百的开发过程中,遇到了一个小乐Fm开发,需要跟百度fm差不多,上边一个条,下边一个条,中间部分填充.但是还不能固定高度,因为屏幕的宽高都不一样...height:100%是不可行的.搜了一圈, ...

  6. css中div高度自适应

    高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...

  7. div高度自适应的问题

    对象height:100%并不能直接产生效果,是因为跟其父对象有关. #center{height:100%;} 上面的css样式是无效的,不会产生任何效果. 需要改写:   html,body{ m ...

  8. Header 与 Footer 的 DIV 高度固定， 中间内容 DIV高度自适应，内容不满一页时，默认填满屏幕。

    一.需求: 页面布局分三大块: Header Body Footer 1.内容不满一页时,Footer 在屏幕最底部,Body 填充满 Header 与 Footer 中间的部分. 2.当缩小浏览器时 ...

  9. Vue中div高度自适应

    Vue中尽量不使用dom的高度计算 <template> <div :style="conheight"> </template> <sc ...

随机推荐

  1. GDI+中GIF图片的显示

    某位网友曾经问过我GDI+中Gif图像显示的问题,一直没时间给你写,在此致歉.我把这篇文章送给他. 一.GIF格式介绍 1.概述 GIF(Graphics Interchange Format,图形交 ...

  2. android:id="@+id/button1" 与 android:id="@id/button1" 区别 @string

    一.android:id="@+id/button1" 与 android:id="@id/button1" 区别 android:id="@+id/ ...

  3. 《FreeSWITCH: VoIP实战》：SIP 模块 - mod_sofia

    SIP 模块是 FreeSWITCH 的主要模块,所以,值得拿出专门一章来讲解. 在前几章时里,你肯定见过几次 sofia 这个词,只是或许还不知道是什么意思.是这样的,Sofia-SIP 是由诺基亚 ...

  4. C++ Language

    C++ Language Reference https://msdn.microsoft.com/en-us/library/3bstk3k5(v=vs.120).aspx

  5. 100 open source Big Data architecture papers for data professionals

    zhuan :https://www.linkedin.com/pulse/100-open-source-big-data-architecture-papers-anil-madan Big Da ...

  6. #你好Unity3D#Hierarchy视图监听gameObject点击事件

    今天无意间又找到了个好方法     1 2 3 4 5 6 7 8 9 10 [InitializeOnLoadMethod] static void Start () {   Selection.s ...

  7. C# HttpRequest 中文编码问题

    工作中的项目要用到别家的网络短信平台,工作中遇到中文编码的问题,特总结以备忘. GET方法: public string DoWebRequest(string url)         {      ...

  8. 常规SQL注入脚本

    一:union报错注入 猜字段长度:order by 28 先显示位http://127.0.0.1/sql.php?cmd=-1 UNION SELECT 1,2,3,4,5,6,7,8,9 当前数 ...

  9. 【转载】onclick与onCommand的区别

    这两个事件没有本质区别,都是点击执行一个事件.不同在于传递的参数不一 样,OnClick (object sender, EventArgs e),OnCommand (object sender, ...

  10. vs2012 Nuget错误：“未能解析此远程名称api.nuget.org”

    今天在使用vs2012的Nuget功能向新建MVC项目中添加bootstrap时出现一个错误:“未能解析此远程名称api.nuget.org”: 网上查阅资料得知:nuget.org使用的godadd ...