如何做到缩放页面,div元素始终自适应浏览器窗口的高?

这样为什么不行?

    var contactBd = document.getElementById('contact-bd');
    var contactBdHeight = contactBd.offsetHeight;

    if(contactBdHeight<document.documentElement.clientHeight)
    {
        contactBdHeight=document.documentElement.clientHeight;
    }

3个回答

只要html,body和div 都设置 height: 100%;就可以始终自适应浏览器窗口的高度了,不需要js代码

看不出你这段代码是在什么时候执行的。
不过建议最好是放在window的onload事件里执行。

1、不建议使用JS的方式来做这种自适应,毕竟HTML和CSS才是用来做布局的;只有在万不得已的情况下才会用JS来做布局处理。
2、如果不考虑低端浏览器,像高度自适应的方式可以使用css flex布局来实现。此方案不兼容低端IE(11以下)浏览器;
3、也可以使用body html 高度100% 等方式

自适应使用百分比的宽度高度不要用绝对的宽度高度

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
div自适应浏览器窗口
请教各位大侠,我有一个div1,div1里面有一个div2,div2里放一张图片,需求是这张图片能自适应浏览器窗口的大小,浏览器窗口大时,图片尺寸显示大,浏览器窗口小时,图片尺寸显示小。新手,就是调试不成功呢rn[code=css]rnbodyrn margin:0px;rn padding:0px;rn position:relative;rnrn.div1rn height:130px;rn width:100%;rn background-image:url(qtxImg/white1920.jpg);rn position:relative;rnrnrn.div2 rn width:116px;rn height:98px;rn position: absolute;rn top: 13%;rn left: 25%;rnrn[/code]rnrnrn[code=html]rnrn rn rn rn rn rnrnrnrnrnrnrnrnrnrn[/code]rn我的代码,放在div2里的logo不能随浏览器窗口的变化而缩放,我想让它随窗口变化而缩放,请假各位了。
响应式页面,文字如何做到如图片般自适应缩放?
最近在做个新案例,客户要求做wap而且要是现在最流行的自适应页面。小弟第一次学习这方面的技术,求教各位大神如何让字体的大小也能够随着屏幕大小自动缩放?我用的是默认的100%的16px大小。提供个网址给大牛们参考小。rnrn1.casual.sinaapp.comrnrn由于暂时考虑的是移动端所以没有针对pc端做设计。请自由控制浏览器的尺寸查看效果。rnrn问题:rn1、字体大小如何实现自动缩放?rn2、当浏览器高度小于100px时部分图片跑出所属的div。该图片使用的是padding-top控制居中。
页面没有做到自适应
发现博客网有一个bug,作为一名默默无名的前端,表示不能忍[img=https://img-bbs.csdn.net/upload/201801/02/1514874293_690642.jpg][/img]
关于col栅栏系统与div自适应浏览器窗口
首先是关于col栅栏系统,比较系统的用法和规则在官网有介绍,这里说在项目开发中比较常见和容易忽略的问题。 1、col-lg、col-md、col-sm、col-xs四种: col-lg一般用于大屏设备, (min-width:1200px); col-md一般用于中屏设备, (min-width:992px); col-sm一般用于小屏设备, (min-width:768px);
div 自适应宽或高
对于一个写后台的开发人,调试页面样式真的是很难受。需求:上下布局,上面固定高度,下面s自适应高度。思路:俩个div相当父容器都是绝对位置,下面div的top是上面div的高度,自身不给div的高度。代码:&amp;lt;!DOCTYPE HTML&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;meta charset=&quot;gb2312&quot;&amp;gt;&amp;lt;title&amp;gt;11111&amp;lt;/t..
web打印时如何做到页面缩放?
web打印的时候,由于页面太宽,甚至横向排版都无法做到在一页A4内打印,请教各位老大能否指定一个缩放比例,将页面缩小软干百分比然后再打印?最好不要使用execle。
怎么才能做到自适应页面!
现在要求页面背景要轮播的效果,图 1920 1080的大小,要求在不同分辨率下 能保证页面自适应,求大俠帮忙!
求一个自适应浏览器窗口的DIV布局页面
求一个自适应浏览器窗口的DIV布局页面rn
如何做到自适应
希望随着时间的增加 高度越来越小rnid为ss的元素高度设置是为100%可是 ie下还是不变化 ff下是正确的rn希望改成ie下也能变化的(PS:不能用js算高度然后给ss元素)rn[code=HTML]rnrnrn rn Dialogrn rnrnrn rn 11rn rnrn rnrn[/code]
div 文字的宽度自适应缩放的问题
rnrnrn 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容111111111111111111111111111111111111111111111111rnrnrn当改变浏览器的宽度时,希望DIV的内容根据宽度自动显示多少个字符,rn上面的代码在IE中可以实现,但在FireFox却不起作用,要如何写才能兼容这2个浏览器?rn
div如何自适应宽度
[code=HTML]rn rn 固定宽度 rn 要如何让这个div的宽度自由随着main的宽度自动变化呢rnrnrn rn rn 用table就可能很方便实现rn 用div要怎么做呢rnrnrn[/code]rnrn特注: 不能用js来实现
CSS==让div的高等于背景的高(页面自适应,div的宽不变)
&amp;lt;style&amp;gt; .container{ background-image: url('test.png'); background-repeat: no-repeat; background-size: 100% auto; width: 100%; height: 0; paddi...
[求助 请问怎样让一个div始终位于浏览器窗口的右上角????
请问怎样让一个div始终位于浏览器窗口的右上角????rn无论是向下滚动浏览器或改变浏览器窗口的大小,div会自动跑到浏览器窗口的右上角,请问要怎样实现,非常感谢!!!!
关于Echarts使用问题之图表自适应浏览器窗口缩放图形
       最近在开发过程中使用echarts做图形报表,开发场景为:单页面有多个图表,展示图表效果是没什么问题。当我调整浏览器窗口大小的时候,问题来了:图表不会根据浏览器的窗口大小而进行适应性的调整大小,这个问题很严重,非常影响用户的体验,作为一个合格的程序员,我们一定要解决这个问题。后来翻阅文档找到了合适的解决方案。 ##### 解决方案一:(适用于单页单图表)            在...
div垂直居中于浏览器窗口
1.css实现水平和垂直居中 解决的思路是这样的:首先需要position:absolute;绝对定位。而层的定位点,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以2。 style type="text/css">    div  {    position:absolute;    top:50%;    left:50%;    margin:-150px
Flash怎么自适应DIV的高宽
问题是这样的:我页面中有一块固定的版位放Flash广告(高和宽都是定的),如过我上传的Flash达不到这个尺寸,我也希望能撑满整个版位。不知道怎么来做?
div元素按比例缩放的实现方法
[align=center][size=large]div元素按比例缩放的实现方法[/size][/align] 某些场景下,窗口宽度缩放时,使得元素宽度自适应的同时,保证每个元素的宽高比例不变。 [b]1.1利用CSS属性实现——padding-bottom属性[/b] padding-bottom 有一个特性是当它的值是百分比形式时,百分比的基数是其所在元...
让div元素自适应浏览器屏幕高度
很多时候都需要让div或者其他标签元素自适应浏览器屏幕高度,比如左侧菜单高度自适应 所以可以用window.innerHeight然后绑定到元素上面 如图,我用vue,jq的也差不多。反正只要获取到window.innerHeight就行了。 &amp;lt;template&amp;gt; &amp;lt;div id=&quot;app&quot; :style=&quot;htmlHeight&quot;&amp;gt; &amp;lt;/div&amp;gt;...
vb60如何做到自适应分辨率
现在显示器的分辨率太乱了。各种大小不一,rn小分辨率下做的,大分辨率看了太小、rn大分辨率做的,小分辨率显示不完全。rn请问有没有人实现了用vb自适应分辨率。rn求教。
bootstrap图片如何做到自适应?
bootstrap响应式图片的正确的设置是在img上面加上两个类就可以了 src="..." class="img-responsive center-block" > 如果是在内容页里面的话,直接用js给每个img加上属性就可以了。   $(window).load(function(){  $(".panel-body img").addClass
div自适应
height:auto !important; height:200px; /*假定最低高度是200px*/ min-height:200px; 忘记说了一点:整个是在一个iframe里面,而这个ifrme在页面load时做了自适应处理 function iFrameHeight(frmName) { var ifm= document.getElementByI...
echarts图随着浏览器窗口自适应
echarts图随着浏览器窗口自适应 方法一:先在componentDidMount组件初始化echarts图,然后浏览器监听echarts图的大小,非常值的注意的是:在关闭页面的时候需要在componentWillUnmount组件必须移除这个监听事件,否则浏览器会一直监听。 componentDidMount(){ this.myChart = echarts.init(this.re...
iframe自适应始终无解
在表格里用iframe插入另一个网页内容(b.asp.html),并用scrolling="no"不显示滚动条,在网上找了好多方法结果都不能成功。有些在firefox浏览器里成功但是IE里又显示不完全,比如以下代码:rnrnrn rn injection_iframefilernrn rn rn rn rn rnrnrn请热心朋友指导,先[b]谢谢[/b]了!
父级div高固定 子级两个div上下 上边div高固定 下边自适应
.container{ position: relative; width: 200px; height: 600px; border: 1px solid red; } .left{ width:100%; height:200px; background: gray; } .right{ position: absol
如何动态创建div元素。
一个html页中,我想做一个tip的东西,使用DIV来显示和隐形。rn rn可以声明一个div元素,而且功能也正常。rnrn但我使用rn var toolTipLayer = document.createElement(" ");rn document.documentElement.appendChild( toolTipLayer );rn我发现IE没有报错,但就是显示不出来。rnrn请问是什么原因?有方法解决嘛?rn
如何禁止div缩放求救
[code=html]rnrn rn rnrnrn rn 试试看rnrnrnrnrn rnrnrnrnrn rnrn rn rnrnrn[/code]rn在苹果手机上打开时,我希望两根手指的缩放紧紧影响图片而不影响层,可实际却是div也跟着缩放了....求救 这样会影响到其他div的布局啊
如何使div遮盖整个浏览器窗口呢?
因为我的窗口中有多个frame,我的div在其中的一个frame中,而我希望这个div遮盖住所有的frame窗口,该怎么办呢?
如何让div元素(自适应宽度或左浮动)居中显示
要求:只能修改css,不能改变原有的标签类型,如果有可能尽量不要添加新标签rn1:如何让id为"A"的div元素的背景色只占据内容所需的空间并且内容居中(效果与第三个span元素一样)rn2:为id为"B"的div元素添加上float:left,然后如何让这个左浮动元素的背景色只占据内容所需的空间并且内容居中(效果与第三个span元素一样)rnrn[code=HTML]rnrnrnrn rn rnrnrn rn rn AAAArn BBBBrnCCCrnrnrnrnrn[/code]
webview div 自适应如何解决
我用CSS rnhtml,bodyheight:100% 设置了自适应rn还有div 的style高宽都是100%,在浏览器里是正常的自适应rnrn但是在webview里body的高度就不是屏幕高度 而且很小 只有19。从而导致div也只这么高rn请问如何解决?
关于div自适应页面宽度问题
各位仁兄,小弟写了个jsp,页面左右两块都是一个div,当右边的div内容所占不多时,页面没有问题,可是当我从后台把拼出的内容(一个table)放进来时,由于table的宽度原因,右边的div显示就会出问题,显示到页面底部去了!而我想达到的效果是,如果table很宽,则右边的div就生成一个滚动条,可以拖动,以适应整个页面.希望哪位指点一下,先谢了...rnrn[code=HTML]rnrn rn rn rn AttributesAssociatedrn rn rn rn rnrn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn 请点击需要的文档类型进行相关设置...rn rn rn rn rn rn rn rn rn rn 文档类型:rn rn rn rn rn rn rn rn rn rn rn rn rn rn 主属性:rn rn rn rn rn rn rn rn 从属性:rn rn rn rn rn rn rn rn rn rn rn rn rn rn 修改属性值:rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rnrn[/code]
自适应(div自适应,和屏幕自适应高度)
1. div自适应内容: 由于div里的内容常常会发生变化,总是修改高度很麻烦,如果是动态页面则更不可能每次都改高度,所以div必须要自适应内容高度。 技巧: div去掉height,增加padding-bottom即可。 2. 屏幕自适应高度:同div自适应高度一样,有时页面的内容或多或少,甚至没有,而页面存在底部footer,如果不自适应屏幕高度,内容过少,会导致footer跑到页面...
设置div位于浏览器窗口的center
function toCenter(obj){        var top = ($(window).height() - $(obj).height())/2;        var left = ($(window).width() - $(obj).width())/2;        var scrollTop = $(document).scrollTop();       
【前端】js 在浏览器窗口飘来飘去的div
实现以下功能: 1.div自动飘来飘去 + 触及窗口边界反弹 基本思想就是在window.onload方法内使用setInterval()函数,用: var windowWidth = window.innerWidth; var windowHeight = window.innerHeight; 获取当前的窗口大小。 此部分js代码如下: //调用下面的飘动方法,此句写在win...
触发器如何做到高实时性?
响应时间忙时最好不能超过十秒。rnrn另:如何将在数据库收到数据时将数据转发到另外一台计算机上(通过Scoket方式)?
TextView自适应字体大小缩放
当TextView中字符过多时,会动态的改变字体大小以其适应TextView的大小,不会导致换行显示或超出TextView的大小而看不见
MFC界面自适应缩放
  界面没有经过自适应缩放前:   界面自适应缩放后: 程序演示版下载地址: http://pan.baidu.com/s/1nvFIYY9 程序源代码下载以及程序详细文档下载(与程序配套)...
jQuery页面元素缩放插件Zoonooz.js.zip
一个缩放的插件,但是可以用来定位单页面中的不同区域  标签:Zoonooz
关于页面元素按比例缩放的问题
我的jsp页面里有上下两个输入框,在每个输入框的右侧是分别对该输入框的说明性的文字,我的显示器的分辨率是1024*768,我发现当我把页面缩小一些的时候,出现了点问题,就是个元素不能按照现在的页面窗口的大小按比例缩小,出现的情况是:当我把页面拉的小一点了,两个输入框的大小并没改变,而右侧本来是每个输入框对应有两行说明性的文字,现在变成了好多行,而且每行的字也变少了,这些字呈很窄很长的形式排列,页面很不美观,不知道我该怎么样让页面的元素在页面大小变化时也同时按比例缩放,不至于文字的排列都变了。rn麻烦个位前辈赐教!rn小弟重分送上!rn小弟这里谢谢了先!!!
div始终显示在中央
你可以下载试试,绝对有用........................
div 始终并列
网页中需要两个div并排放置,我将一个div的样式设为float:left之后能够出现并排效果,但是浏览器窗口缩小之后两个div会各占一行,请教该如何解决这一问题?
相关热词 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池 c#5.0 安装程序 c# 分页算法