CSS-之外围容器自适应高度

80酷酷网    80kuku.com

  css|自适应 今天我在给客户制作网页(设计是采用xhtml+css)的时候遇到了这个问题,就是给外围容器左右加border,在IE下可以正常显示,FF下有的页面正常,有的就没有,产生的原因是不能自适应高度。

问题:
<div id="main">
<div id="sideleft">left</div>
<div id-"sideright">right</div>
</div>#main容器在非IE下不能很好的适应left和right的高度!

我的解决方案是:

我原来的:#mainContent {width:760px; height:100%; margin:2px auto 0 auto;padding:0; background-color:#fff; border-right:#eee 1px solid; border-left:#eee 1px solid;}

第一步修改:
加上 min-height:auto; max-height:100%;两句,没效果

第二步修改:
加上
#mainContent:after {content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; height: 0;clear: both; visibility: hidden;}
#mainContent {display: inline-block;}
/*\*/
#mainContent {display: block;}

效果实现了,达到了我的要求,而且兼容IE,FF,OPERA

其实最简单的方法是这样的
<div id="main">
<div id="sideleft">left</div>
<div id-"sideright">right</div>
<div
只要清除了浮动就可以让外围容器的背景延伸了

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: