div高度自适应方法总结

看下面代码:

 

 代码如下 复制代码

<style type="text/css">
    .mytest
    {
        width:100px;
        height:100px;
        border:1px solid green;
    }
</style>

    <div class="mytest">据英国《每日电讯报》11月30日报道，以色列安全内阁当天批准在约旦河西岸和东耶路撒冷犹太人定居点新建3000套住房，此举旨在抗议联合国29日批准给与巴勒斯坦观察员国地位。巴以和谈进程也因此蒙上巨大</div>
</body>
</html>

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

 代码如下 复制代码

<style type="text/css">
    .mytest
    {
        width:100px;
        height:auto!important;
        height:100px;
        min-height:100px;
        border:1px solid green;
    }
</style>

<div class="mytest">据英国《每日电讯报》11月30日报道，以色列安全内阁当天批准在约旦河西岸和东耶路撒冷犹太人定居点新建3000套住房，此举旨在抗议联合国29日批准给与巴勒斯坦观察员国地位。巴以和谈进程也因此蒙上巨大阴</div>
</body>
</html>以上代码通过运用!important和min-height属性实现了各个浏览器都能够达到高度自适应效果。
上面都是介绍的是div中都是文本内容的情况，但是还有可能是div中存有子div的情况，下面简单介绍一下此种情况。先看一实例:

 

 代码如下 复制代码

<style type="text/css">
    .parent
    {
        border:2px solid red;
        width:200px;
    }
    .children
    {
        width:200px;
        height:200px;
        background-color:green;
    }
</style>

<div class="parent">
     <div class="children"></div>
</div>

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

 

 代码如下 复制代码

<style type="text/css">
    .parent
    {
        border:2px solid red;
        width:200px;
    }
    .children
    {
        width:200px;
        height:200px;
        float:left;
        background-color:green;
    }
</style>

<div class="parent">
        <div class="children"></div>
</div>

从上面代码的运行可以看出，父元素并没有被撑开，这个是因为子元素float属性值设置为left，从而脱离了文档流。如果想让上面的父元素达到高度自适应，就要清除子元素的浮动。修改代码如下:

 

 代码如下 复制代码

<style type="text/css">
    .parent
    {
        border:2px solid red;
        width:200px;
        overflow:hidden;
    }
    .children
    {
        width:200px;
        height:200px;
        float:left;
        background-color:green;
    }
</style>

<div class="parent">
    <div class="children"></div>
</div>

以上代码通过给父元素的样式中添加overflow:hidden即可清除浮动。
如果说父元素就像最开始的例子一样，固定了高度，并且还要实现高度自适应效果，就可以参阅元素中内容是文本的情况，解决方法是一样的。代码如下:

 

 代码如下 复制代码

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

<div class="parent">
        <div class="children"></div>
        <div class="clear"></div>
</div>

上面讲述的都是css,我另外介绍一通过js的方法，原理是js获取两个子div的高度然后比较哪个大，然后分别设置div的高度,下面的实例演示3列式的。

js代码如下：

 代码如下 复制代码

<script>  
var a=Math.max(document.getElementById("left").offsetHeight,document.getElementById("center").offsetHeight,document.getElementById("right").offsetHeight);  //获取3个div的最大高度
document.getElementById("left").style.height = a + "px";  
document.getElementById("center").style.height = a + "px";  
document.getElementById("right").style.height = a + "px";  
</script> 

需要注意的是这个js代码请放在页面底部

时间： 2024-07-28 23:11:16

div高度自适应方法总结的相关文章

css div 高度自适应

  css div 高度自适应其实初学者经常会碰到此类的问题,记得我以前就碰过这样的问题喽,问了好多朋友都没办法在foxfir 与ie下同时让div高度自适应,下面是我经过反应的试验得出来了代码. .all_block{   width:900px;   margin:0px auto;   padding:12px 10px 0px 10px;   background-color:#FFFFFF;     clear:both; position:relative;overflow:auto

JS获取一个未知DIV高度的方法_javascript技巧

本文实例讲述了JS获取一个未知DIV高度的方法.分享给大家供大家参考,具体如下: 通过元素的clientHeight属性能够得到元素的高度,如: var height = element.clientHeight; 这种做法的局限: 1. 如果元素的display属性设置为none, 那么得到的结果为0 2. 在safari浏览器中,需要使用:element.offsetHeight得到实际高度,这是safari浏览器的bug 下面是Prototype提供的方法,能够兼容各种浏览器,同时在元素隐

jQuery实现iframe宽度、高度自适应方法

高度自适应超级简单的方法,也不用写什么判断浏览器高度.宽度啥的. 下面的两种方法自选其一就行了.一个是放在和iframe同页面的,一个是放在test.html页面的. 注意别放错地方了哦. iframe代码,注意要写ID  代码如下 复制代码 <iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrol

div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题

div ul li 嵌套的使用在网页布局中很常见,最主要的问题就是如何解决增加多个li后DIV高度自动适应问题,本文有个不错的示例,可以解决此问题,大家可以尝试运行下     复制代码 代码如下: <body bgcolor="#0B3D82"> div ul li 嵌套后解决高度自适应办法: html代码如下 复制代码 代码如下: <div class="main_div"> <ul> <li><a href=

css因float引起div高度自适应无效解决方法

 代码如下 复制代码 <style> #main{float:left;min-height:500px;} #l{float:left;margin-bottom:10px;margin-right:10px;padding:6px 10px;width:117px;} #r{float:right;margin-right:10px;padding-top:10px;width:864px;overflow:hidden;} </style>   <div id=&quo

Firefox div高度自适应_javascript技巧

1.如果div想要一个最小高度,那么应该用css的minheight这个属性,但是IE不支持,考虑到大多数用户都使用IE,所以一般情况下这个属性基本上弃置不用.在IE里面,height基本上就可以当作minheight来用,因为如果内容超出height,IE会自适应其高度.但是一旦设置了 height以后,FIrefox就不会自适应div的高度了.所以只能两个属性都不用,干干净净地写<div>Jimbor Studio</div>. 2.即使不设置固定高度,Firefox对高度的自

研究了一下div+css的高度自适应问题_经验交流

div+css还是比较难搞的,要实现上下两个div高度自适应感觉麻烦,查了下资料只找到上下高度都是百份比的是可以的,我要实现上面的div是具体像素高度,下面是自适应剩余的百份比.自己搞了一下还要用上js,不知道是不是很笨,有好的方法请大家帖出来. <body style="height:100%; margin:0px; width:100%;"> <div id="ddii22″ style=" background-color:#ffffff;

关于div自适应高度/左右高度自适应一致的js代码_javascript技巧

在使用DIV和CSS进行网页布局中,DIV的自适应高度和自适应宽度是一个很常见的问题. 为了保证页面的整体美观性,需要将两个或者多个层的高度/宽度保持一致. 左右自适应高度一致 Jquery 复制代码 代码如下: <div style="width:300px;"> <div id="Left" style="float:left;background-color:blue;">1<br/>3<br/&g

子元素div高度不确定时父div高度如何自适应

每当进行页面布局时,我们都有这样的需求,就是当子元素div高度不确定时父div自适应高度,本文整理的多种方法可以解决此问题,感兴趣的朋友可以参考下   在最外层div加以下样式 height:100%; overflow:hidden; 其它方法: Div即父容器不根据内容自适应高度,我们看下面的代码:   复制代码 代码如下: <div id="main"> <div id="content"></div> </div&g