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

div+css还是比较难搞的，要实现上下两个div高度自适应感觉麻烦，查了下资料只找到上下高度都是百份比的是可以的，我要实现上面的div是具体像素高度，下面是自适应剩余的百份比。自己搞了一下还要用上js，不知道是不是很笨，有好的方法请大家帖出来。
<body style=”height:100%; margin:0px; width:100%;”>
<div id=”ddii22″ style=” background-color:#ffffff; height:110px; position:absolute; left:0px; top:0px; width:100%; z-index:1000″>
1111111111111111
</div>
<div id=”ddii” style=” background-color:#999999; height:100%; position:absolute; left:0px; top:110px; width:100%; z-index:100″>
<div style=”height:100%; overflow:auto; “>
</div>
</div>
<script type=”text/javascript”>
document.getElementById('ddii').style.height = document.getElementById('ddii').clientHeight-110 + ‘px';
</script>
</body>

赞 (0)

相关推荐

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

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

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

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

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

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

  • 浮动的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对高度的自

  • 基于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+css的高度自适应问题

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

  • 解决列高度自适应(相同)的五种方法

    1.背景图填充 这是使用最广泛的一种做法,无hacks,推荐使用: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta htt

  • 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

  • DIV+CSS网页制作布局技巧学习

    CSS布局常用的方法:float:none|left|right取值:none: 默认值.对象不飘浮left: 文本流向对象的右边right: 文本流向对象的左边 它是怎样工作的,看个一行两列的例子xhtml:<div id="wrap"><div id="column1">这里是第一列</div><div id="column2">这里是第二列</div><div class=&

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

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

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

  • DIV+CSS布局教程大全与pdf电子书 下载

    div+css布局入门 4XHTML下css+div布局总结. 6网页设计DIV+CSS--第1天:选择什么样的DOCTYPE. 9第一天 9什么是DOCTYPE 10我们选择什么样的DOCTYPE 10补充 10网页设计DIV+CSS--第2天:什么是名字空间 10网页设计DIV+CSS--第3天:定义语言编码 11网页设计DIV+CSS--第4天:调用样式表. 11外部调用样式表 11双表法调用样式表 12网页设计DIV+CSS--第5天:head区的其他设置. 12收藏夹小图标. 12为搜

  • DIV+CSS经常用到的属性、参数及说明

    通用类 overflow:hidden;自动隐藏超出的内容,防止撑开层和表格的范围 !important 指定样式规则的应用优先权 文字类 color: #FF0000;文字颜色 font-family: "Arial", "Helvetica", "sans-serif";字体 font-size: 9px;字号 text-align:center; 居中(left为居左,right为居右) line-height:28px:行高(可用150%

  • JS+DIV+CSS实现的经典标签切换效果代码

    JS+DIV+CSS实现的经典标签切换效果代码

    本文实例讲述了JS+DIV+CSS实现的经典标签切换效果代码.分享给大家供大家参考.具体如下: 这里演示JS+DIV+CSS实现的标签切换效果代码,通俗说就是滑动门的实现效果,很不错的实例,希望对你学习JS+CSS布局有帮助. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-bq-cha-tab-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • 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函数,计算屏幕容

随机推荐