Firefox div高度自适应

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

2.即使不设置固定高度，Firefox对高度的自适应也不那么尽人意。如果需要在一个层内嵌套一个需要float来规定的层，那它就又失灵了。其实有个最简单的方法，就是在div内的最下面加一个clear:both的div。例如：

代码如下:

<div>
<div style="float:left;">Jmedia Design</div>
<div style="float:right;">www.jmedia.cn</div>
<div style="clear:both;"></div>
</div>

3.还有看到一个js解决的，也可以。


代码如下:

<script type="text/javascript">
<!--
document.getElementById("box").style.height=document.getElementById("right").scrollHeight+20+"px"
-->
</script>

赞 (0)

相关推荐

  • 父div高度不能自适应子div高度的解决方案

    复制代码 代码如下: <div id="parent"><div id="content"> </div></div> 当content内容多时,即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展.解决方案如下: 复制代码 代码如下: <div id="parent">  <div id="content"></div

  • 利用onresize使得div可以随着屏幕大小而自适应的代码

    当我们让div居中时候,一般有两种方法,一种是固定左右宽度,也就是使用像素绝对定位:另一种是用百分比来相对定位,在这种两种方式下,绝对定位是不能让div随着屏幕而自适应的,而用百分比就可以,但是,是用百分比就会有一个新的问题,如果我们的页面中有这么一句 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit

  • 基于jQuery实现左右div自适应高度完全相同的代码

    在线演示:http://demo.jb51.net/js/2012/jquery_demo/jquery_div_autoheihet.htm完整代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo

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

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

  • 研究了一下div+css的高度自适应问题

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

  • 浮动的div自适应居中显示的js代码

    当div是浮动的时候浏览器窗口发生变化的时候不能居中显示(因为浮动的时候一般设定的有left或者right值) 可以先用jquery获取外围的div随浏览器变化而变化的宽度(加上监听事件) 之后再获取div的宽度 例如: 复制代码 代码如下: function autoWidth(){ var bW = $(".call_man").width();//外围的div     var popWidth = (bW-150)/2    //(150是div的宽度)    $(".

  • Firefox div高度自适应

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

  • JS实现DIV高度自适应窗口示例

    本文实例讲述了JS实现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"> <head

  • 典型的三行二列居中高度自适应布局

    典型的三行二列居中高度自适应布局

    如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) 首先先按这里看实际运行效果,这个页面在mozilla.opera和IE浏览器中均可以实现居中和高度自适应.我们来分析代码: 完整代码<html><head><style type="text/css">body{background:#999;text

  • iframe高度自适应及隐藏滚动条的实例详解

    iframe高度自适应及隐藏滚动条的实例详解 在工作中,我们可能会遇到自己公司和其他的公司达成合作关系,从而共同开发某个项目.而这时候,我们可能就需要在自己的网站上嵌入别人做好的页面.而这种情况下,我们一般都会选择去使用iframe达到我们的目的.但是iframe用起来,真的是让人头痛,高度无法控制,难看的滚动条等等,下面我分享一下自己在处理iframe时的一些心得. 高度自适应 <iframe src="http://huichang.qunar.com/huiQunar" i

  • EasyUI布局 高度自适应

    最近在把以前写的一个项目改成用easyui做前端.过程中遇到了不少问题.其中一个就是datagrid不能很好的布局.想了好多办法都有局限.最后想到会不会是布局的问题,经过实践,最后问题解决. 1:比如在项目中用到了datagrid.如果界面比较简单---只有一个datagrid只需要把它的属性fit 设置为true就能实现自动适应窗体.如果在datagrid上方还有其他div的话,datagrid就不能很好的自动适应窗体.如查datagrid有分页控件,分页控件就看不到了.这个时候就应该用 ea

  • element el-table表格的二次封装实现(附表格高度自适应)

    element el-table表格的二次封装实现(附表格高度自适应)

    前言 在公司实习使用vue+element-ui框架进行前端开发,使用表格el-table较为多,有些业务逻辑比较相似,有些地方使用的重复性高,如果多个页面使用相同的功能,就要多次重复写逻辑上差不多的代码,所以打算对表格这个组件进行封装,将相同的代码和逻辑封装在一起,把不同的业务逻辑抽离出来.话不多说,下面就来实现一下吧. 一.原生el-tbale代码--简单の封装 这里直接引用官方的基础使用模板,直接抄过来(✪ω✪),下面代码中主要是抽离html部分,可以看出每个el-table-column

  • vue仿携程轮播图效果(滑动轮播,下方高度自适应)

    vue仿携程轮播图效果(滑动轮播,下方高度自适应)

    先看案例,使用vue+swiper实现,slide不同高度时,动态计算盒子高度,让其下方高度自适应的效果 首先搭建vue项目,这里不做过多说明,然后安装swiper npm install swiper --save-dev 1. js部分:初始化swiper组件,vue要在mounted生命周期中进行初始化,代码如下: import Swiper from 'swiper' import { TweenMax, Power2 } from 'gsap' 初始化时调用resize函数,计算屏幕容

  • React实现一个高度自适应的虚拟列表

    React实现一个高度自适应的虚拟列表

    近期在某平台开发迭代的过程中遇到了超长List嵌套在antd Modal里加载慢,卡顿的情况.于是心血来潮决定从零自己实现一个虚拟滚动列表来优化一下整体的体验. 改造前: 我们可以看出来在改造之前,打开编辑窗口Modal的时候会出现短暂的卡顿,并且在点击Cancel关闭后也并不是立即响应而是稍作迟疑之后才关闭的 改造后: 改造完成后我们可以观察到整个Modal的打开比之前变得流畅了不少,可以做到立即响应用户的点击事件唤起/关闭Modal 性能对比Demo: codesandbox.io/s/a-

随机推荐