2008-07-25

DIV自适应高度

关键字: div自适应高度 firefox

div高度自适应是个比较麻烦的问题，Div即父容器不根据内容自适应高度，我们看下面的代码： 

<div id="main">
<div id="content"></div>
</div>

 试了网上很多的方法都不行，看了javaeye页面的代码终于解决了（我使用firebug查看的），写出来共享一下。

很简单

#main{ 
  height:100%;
  overflow:hidden;
  display: inline;
}

 源文件也得改一下

<div id="main">
<div id="content"></div>
<br style="clear:both;" />   //多了这个东西
</div>
 

 

网上有一中方法只说加个

overflow:hidden;

我试过了不行，原来还得加一个

 display: inline;

ok！这个主要是解决firefox的问题。

评论
terryang 2008-07-30   回复
呵呵，希望以都没用的就少写点。这么多应该能解决 dbwang 的问题了吧！
bojingwen1984 2008-07-30   回复
就你说的那个例子，我所做的理解是，应该要有float之类的。给出一个例子，在这种情况下，你所说的那一行，就是必须的，少了话，在firfox下面将不发挥作用，简单例子如下：
<html>
<head>
<title>div自适应高度问题的完美解决方案
</title>
<style type="text/css">
#main{
border:1px solid red;
text-align:center;
}
#content{
width:90%;
border:1px dashed green;
}
#footer{
text-align:center;
border:1px dashed green;

}
#contentLeft{
width:48%;
float:left;
}
#contentRight{
width: 48%;
float:right;
}
</style>
</head>
<body>
<div id="main">
<div id="content">
<div id="contentLeft">
22 、 JSP 中动态 INCLUDE 与静态 INCLUDE 的区别？
动态 INCLUDE 用 jsp:include 动作实现 <jsp:include page="included.jsp" flush="true" /> 它总是会检查所含文件中的变化，适合用于包含动态页面，并且可以带参数。静态 INCLUDE 用 include 伪码实现 , 定不会检查所含文件的变化，适用于包含静态页面 
 
23 、什么时候用 assert 。
  assertion( 断言 ) 在软件开发中是一种常用的调试方式，很多开发语言中都支持这种机制。在实现中， assertion 就是在程序中的一条语句，它对一个 boolean 表达式进行检查，一个正确程序必须保证这个 boolean 表达式的值为 true ；如果该值为 false ，说明程序已经处于不正确的状态下，系统将给出警告或退出。一般来说， assertion 用于保证程序最基本、关键的正确性。 assertion 检查通常在开发和测试时开启。为了提高性能，在软件发布后， assertion 检查通常是关闭的。
</div>
<div id="contentRight">
22 、 JSP 中动态 INCLUDE 与静态 INCLUDE 的区别？
动态 INCLUDE 用 jsp:include 动作实它总是会检查所含文件中的变化，适合用于包含动态页面，并且可以带参数。静态 INCLUDE 用 include 伪码实现 , 定不会检查所含文件的变化，适用于包含静态页面
 
23 、什么时候用 assert 。
  assertion( 断言 ) 在软件开发中是一种常用的调试方式，很多开发语言中都支持这种机制。在实现中?
</div>
</div>
<br style="clear:both"/>
</div>
<div id="footer">
这里是页脚</div>
</body>
</html>
如果有理解不正确的地方，还望大家指出，一起进步哈！
bojingwen1984 2008-07-30   回复
其实自适应高度问题比较简单，理解一下position和float，可能就更容易理解这个问题了！
bojingwen1984 2008-07-30   回复
单说实现你那个高度自适应比较简单吧，不用你多的那一行，当你content里面的内容都是float时候，才需要clear:both;我写的自适应高度，不用那个也是可以的，简单的例子如下：
<html>
<head>
<title>div自适应高度问题的完美解决方案
</title>
<style type="text/css">
#main{
border:1px solid red;
text-align:center;
}
#content{
width:90%;
border:1px dashed green;
}
#footer{
width:90%;
border:1px dashed green;
}
</style>
</head>
<body>
<div id="main">
<div id="content">
22 、 JSP 中动态 INCLUDE 与静态 INCLUDE 的区别？
动态 INCLUDE 用 jsp:include 动作实现 <jsp:include page="included.jsp" flush="true" /> 它总是会检查所含文件中的变化，适合用于包含动态页面，并且可以带参数。静态 INCLUDE 用 include 伪码实现 , 定不会检查所含文件的变化，适用于包含静态页面 
 
23 、什么时候用 assert 。
  assertion( 断言 ) 在软件开发中是一种常用的调试方式，很多开发语言中都支持这种机制。在实现中， assertion 就是在程序中的一条语句，它对一个 boolean 表达式进行检查，一个正确程序必须保证这个 boolean 表达式的值为 true ；如果该值为 false ，说明程序已经处于不正确的状态下，系统将给出警告或退出。一般来说， assertion 用于保证程序最基本、关键的正确性。 assertion 检查通常在开发和测试时开启。为了提高性能，在软件发布后， assertion 检查通常是关闭的。
22 、 JSP 中动态 INCLUDE 与静态 INCLUDE 的区别？
动态 INCLUDE 用 jsp:include 动作实它总是会检查所含文件中的变化，适合用于包含动态页面，并且可以带参数。静态 INCLUDE 用 include 伪码实现 , 定不会检查所含文件的变化，适用于包含静态页面
 
23 、什么时候用 assert 。
  assertion( 断言 ) 在软件开发中是一种常用的调试方式，很多开发语言中都支持这种机制。在实现中?
</div>
<div id="footer">
这里是页脚</div>
</div>
</body>
</html>
terryang 2008-07-28   回复
不好意思，礼拜两天休息了。
这个问题就是一个ie和firefox的兼容问题。看代码
<div id="main"> 
     <div id="content"></div> 
</div> 
<div id="footer">
      这是页脚
</div>
main是父容器，content是子容器。
我们先用
   #main{  
      height:100%; 
      overflow:hidden; 
      display: inline; 
    } 
来定义我们的css。要解决的问题就是当你的子容器content内容不确定的时候，比如要放一篇文章，他的高度可能是不确定的，在ie上父容器的高度会随着你的文章的内容的变长而自动也去适应子容器的高度，而在firefox下不会，他会将footer弄得很难调整，不论你怎么调整都不会规矩的在main容器的下面待着。我们要解决的就是这个问题。在main容器中加入一个br，看下面

<div id="main"> 
     <div id="content"></div> 
   <br style="clear:both;" />   //多了这个东西 
</div> 
这个firefox下你的content容器内容再多，footer容器也可以正常显示了。
还看不懂的话再留言吧...那天下午仓促写下的。
achun 2008-07-26   回复
这确实是个让人烦的问题,
虽然display: inline;能解决这个问题
(原因是display: inline;的元素就是根据内容自适应高度的),
貌似标准里inline元素是不能再包含其他非inline元素的.
该死的标准,管不了了,能解决问题就好.

另外一般遇到这个问题的时候都是要操作什么,能自由拖动的,自适应大小的,跟父元素有关的绝对定位的元素的时候才会遇到的.

说实话我对这个解决方案并不满意,所以一直在找其他替代方案,可惜现在还没有找到.
longleg 2008-07-26   回复
我也想知道，楼主解决的是什么问题，没太看清楚，麻烦详细说一下。
jacky68147527 2008-07-26   回复
也可以通过JS脚本来调整DIV的高度，使之达到自适应的效果!
dbwang 2008-07-25   回复
没看明白！
不知道你想说明什么问题，没有阐述明白！
能详细一下吗！
我可能需要！谢谢
发表评论

提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则

您还没有登录，请登录后发表评论

terryang
搜索本博客
存档
最新评论