如何让高度进行自适应

7人阅读 评论(0) 收藏 举报

  我们都知道,宽度自适应,有很多种办法,最简单的就是百分比的方法,来进行宽度自适应,麻烦点的去js里面进行获取屏幕的宽度去进行判定,这样的方法来进行自适应,但今天我遇到个问题,对已写好的页面进行二开,要做到自适应的程度,结果把宽度自适应了,但以前的高度是写死的,导致页面缩小或变成手机端时,出现了页面坍塌。给父元素的高度,进行了height:auto;结果一点反应都没有。后来查资料才知道,由于我的子元素有浮动的效果,所以单独设父元素高auto,是起不到一点作用的。现在给大家分享下两种高度自适应的办法:

    随着微软新操作系统的上市,ie6现在用的人越来越少了,但是XP系统看来是太过经典,仍然有相当多的用户在使用,且这部分人群中的大部分也没有单独升级浏览器的习惯,于是乎ie6依旧是使用最多的浏览器版本。根据本站流量的统计,来自ie6的访问比重为72.6%。表明了以上的观点,虽然最高的时候,ie6占了90%以上。

言归正传,div+css作为网页的布局已经是大势所趋。它的优点不在这里啰嗦。但最近经常有朋友提到关于容器高度自适应的兼容性问题。在这里简单作答。

1.有些时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应。在一般情况下,使用min-height即可解决。但是广大网民的首选浏览器ie6并不支持min-height。ie7,opera,火狐没有问题。所以采用以下写法可以解决兼容性: 


height:auto!important;
height:200px;
min-height:200px;

2.很多朋友反映用上面的方法后,在有些时候依然无法解决容器无法撑开自适应的问题。那一定是有容器嵌套的情况下,而子容器又是浮动的。例如
<div class="fuqin"><ul><li>内容1</li><li>内容1</li></ul></div>
其中class为fuqin的div有浮动的li,当li比较多的时候,即便是div设置的是最小高度,也无法被撑开。

原因就在于作为子容器的li是浮动的即 。在这种情况下,即便是li的内容超过了div的高度,div也无法撑开。

解决方法如下:
在浮动的容器后面,父容器结束之前加入一个div

<div class="fuqin"><ul><li>内容1</li><li>内容1</li&gt;</ul><div class="clearfloat"></div></div>
.clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px;} 
查看评论

用 API 作简繁体转换

時間: 2004/3/25作者: Robert參考: MSDN電郵: zsc771120@yahoo.com.cn關鍵字: 简繁体 API 内码 BIG5 GB2312 MultiByteToWide...
  • zzzsssccc
  • zzzsssccc
  • 2004-04-15 16:05:00
  • 3498

如何让iframe框架自适应内容高度

$(function(){   var document_height="";   //iframe自适应高度   var timeIframe;   window.onload=func...
  • benben1164
  • benben1164
  • 2016-11-09 11:09:50
  • 807

如何让一个元素自适应屏幕的高度

让一个元素的高度和屏幕的高度一样,并且随着屏幕高度的变化而变化,用js代码实现;记得写完调用这个函数; //====tree的自适应高度start================...
  • zhangjing1019
  • zhangjing1019
  • 2017-08-01 17:48:26
  • 536

SDAutoLayout实现cell高度自适应

  • 2018年01月25日 11:53
  • 132KB
  • 下载

让div自动适应内容的高度

我们看下面的代码:  当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。  我们可以通过三...
  • gaoyunpeng
  • gaoyunpeng
  • 2007-08-02 12:54:00
  • 30187

让canvas的高度自适应

html: js: $(function () { ...
  • java_zhaoyanli
  • java_zhaoyanli
  • 2016-12-23 16:37:21
  • 942

jquery实现div自适应浏览器高度(宽度)

jquery实现div自适应浏览器高度(宽度) function autoHeight() { var h = $(window).height(); var h_old = 300; if ...
  • q707096967
  • q707096967
  • 2013-05-02 16:08:07
  • 5166

如何让body及里面的div、表格等自动适应屏幕高度

高度 自动适应
  • lq305
  • lq305
  • 2011-05-13 16:53:00
  • 4840

一个CSS+div高度自适应布局模型

近日查看了一些资料自己研究写了一个网站布局,采用高度自适应,css样式表如下:* { margin:0; padding:0; } BODY{ font-size: 12px; font-...
  • huangyezi
  • huangyezi
  • 2008-06-18 12:30:00
  • 5591

怎么让Html的高度自适应屏幕高度

在写css静态页面的时候让Html的高度自适应屏幕高度是一个常见的需求,比如你有一个需要置底的bottom按钮,需要在内容不足一屏的时候显示在屏幕的底部,在内容超过一屏的时候显示在所有内容的底部。 效...
  • u014374031
  • u014374031
  • 2017-04-05 15:36:20
  • 19047
    个人资料
    持之以恒
    等级:
    访问量: 521
    积分: 95
    排名: 142万+
    文章分类
    文章存档