首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Javascript -在调整窗口大小时垂直调整两个div的大小

在调整窗口大小时垂直调整两个div的大小,可以通过JavaScript来实现。具体的实现方式如下:

  1. 首先,给两个div元素分别设置一个唯一的id,以便在JavaScript中能够准确地获取到它们。
代码语言:html
复制
<div id="div1"></div>
<div id="div2"></div>
  1. 接下来,在JavaScript中监听窗口大小的变化事件,当窗口大小发生变化时,执行相应的操作。
代码语言:javascript
复制
window.addEventListener('resize', function() {
  // 获取窗口的高度
  var windowHeight = window.innerHeight;
  
  // 计算每个div的高度
  var divHeight = windowHeight / 2;
  
  // 设置div的高度
  document.getElementById('div1').style.height = divHeight + 'px';
  document.getElementById('div2').style.height = divHeight + 'px';
});

上述代码中,我们使用window.innerHeight获取窗口的高度,然后将窗口高度除以2,得到每个div应该设置的高度。最后,通过document.getElementById获取到对应的div元素,并设置其高度为计算得到的值。

这样,当窗口大小发生变化时,两个div的高度会自动调整为窗口高度的一半。

这个功能在很多网页设计中非常常见,特别是需要实现响应式布局的情况下。例如,在一个网页中,上半部分显示图片,下半部分显示文字,当窗口大小变化时,希望图片和文字的高度能够自动调整为窗口高度的一半,这时就可以使用上述的方法来实现。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云函数(SCF)。

  • 腾讯云云服务器(CVM):提供弹性、可靠的云服务器,适用于各种应用场景。详情请参考腾讯云云服务器
  • 腾讯云云函数(SCF):无需管理服务器,按需运行代码,实现弹性扩缩容。详情请参考腾讯云云函数
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

VMware虚拟机软件中安装Ubuntu虚拟机窗口不能自动调整大小解决办法

 VMware虚拟机软件 中安装 Ubuntu虚拟机 窗口不能自动调整大小解决办法:   配置虚拟机时,发现屏幕大小太小,一般解决思路是:需要安装vmware tools ,屏幕就会自适应 。...1)首先是打开虚拟机,菜单栏找到“VM”选项,并在其子菜单中选择 “Guest” --> "Install/Upgrade VMware Tools" (注意:是要在虚拟机启动状态下进行操作)。     ...8)重启之后VMware界面的菜单栏找到 “View” --> “Autosize” --> “Autofit Window” 选定它。         ...(中文版是:查看 --> 自动调整大小 --> 自动适应客户机大小 )   9)Ubuntu分辨率调整,进入“系统设置”,找到 “显示” 点击进入调整你需要分辨率,通常数值越大,界面就越大,能显示内容就越多...至此配置成功,虚拟机可随VMware窗口大小自动调整。 问题解决之后界面: ?

13K30

easyui(一) 初始easyui「建议收藏」

javascript,也不需要对css样式有深入了解,开发者需要了解只有一些简单html标签,一段废话,通俗一点,就是简化开发,它是一个框架,和jQuery只是一个js类库,       easyui...maxWidth:当调整大小时最大宽度 默认10000 maxHeight:当调整大小时最大高度 默认10000 minWidth:当调整大小时最小宽度...默认10 minHeight:当调整大小时最小高度 默认10 style:div一些属性 --> <div class="easyui-resizable...maxWidth:当调整大小时最大宽度 默认10000 maxHeight:当调整大小时最大高度 默认10000 minWidth:当调整大小时最小宽度...默认10 minHeight:当调整大小时最小高度 默认10 style:div一些属性 --> <div id="rr"

2.8K30

【快速解决】使用python图形库,禁止用户拉伸收缩界面,使用tkinter中window.resizable(False, False)技术:固定窗口大小与布局稳定性

当你使用Pythontkinter库创建GUI(图形用户界面)应用程序时,可以使用window.resizable(False, False)技术来控制窗口是否可调整大小。...这个技术有着重要作用,特别是当你希望保持窗口固定大小时。...1. window.resizable()方法 window.resizable()是tkinter窗口对象方法,它接受两个布尔值作为参数,分别控制水平和垂直方向上窗口大小是否可调整。...第一个参数:控制水平方向上调整(宽度) 第二个参数:控制垂直方向上调整(高度) 2. 参数取值说明 True:允许用户调整窗口大小。 False:禁止用户调整窗口大小。 3....示例代码解释 示例代码中,window.resizable(False, False)将窗口设置为不可调整大小

17010

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 介绍和使用方法

关于 mCustomScrollbar mCustomScrollbar 是个基于 jQuery UI 自定义滚动条插件,它可以让你灵活通过 CSS 定义网页滚动条,并且垂直和水平两个方向滚动条都可以定义...,它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动支持,并且滚动过程中,还可以缓冲滚动使得滚动更加平滑,还可以自动调整滚动条位置和定义滚动到位置等...如果当你使用类似 Google 或者 Sina 常用 Javascript加速服务的话,更推荐采用下面的这种 fallback 写法,如果 CDN JavaScript 代码没有加载成功...:Integer }:设置点击滚动按钮时候每次滚动数值 像素单位 默认 40像素 advanced:{ updateOnBrowserResize:Boolean }:根据百分比为自适应布局 调整浏览器上滚动条大小...值:true,false 设置 false 如果你内容块已经被固定大小 advanced:{ updateOnContentResize:Boolean }:自动根据动态变换内容调整滚动条大小

13.9K30

JQuery iframe宽高度自适应浏览器窗口大小解决方法

需求场景1 实现需求:如下图,点击左侧导航,打开对应tab页面,其中tab页面的内容为 iframe,这里希望iframe高度和宽度,根据浏览器窗口大小变化而变化,同时页面内容过多,或者过宽时,出现...}); } 说明: window.innerHeight 获取浏览器窗口高度-去掉浏览器地址栏,书签栏可视区域高度,包括横向滚动条高度。.../** * 浏览器窗口大小发生变化时,自动调整iframe页面高度 * 浏览器等因素导致改变浏览器窗口大小时,会发生多次resize事件,导致频繁调用changeFrameHeight() */ $(...JavaScript”,以上代码也可以使用JQuery$(window).resize(function)等效实现。...当调整浏览器窗口大小时,发生 resize 事件。

6.5K20

DIV元素水平和垂直居中

一般有水平居中,和垂直居中。一般设置水平居中简单。基本是margin:0 auto,就可以了。但是垂直居中,我们有时会觉得使用vertical-align,但是这个属性对div元素不起作用。...目前通用解决办法是,使用绝对定位,然后设置left和top为50%。然后通过margin来设置。下面具体代码演示了一个简单登录页面,然后使登录界面水平居中和垂直居中。...使用Chrome、Firefox和IE9以上浏览器中,改变浏览器大小div元素还是会垂直居中。所有不需要额外写JavaScript代码进行定位。...后续会写到另外一个问题:一个div中,不固定高度图片如何垂直居中。另外jQuery UIDialog控件有一个bug就是,页面太长了,往下拉滚动条时,overlay高度不能自动延伸。...这里需要写代码进行控制,全局js文件中,添加下面代码: //hotfix.修正overlay在窗口发生onresize时,不调整位置 function update_widget_overlay_height

2.7K80

第124天:移动web端-Bootstrap轮播图插件使用

Bootstrap JS插件使用 > 对于BootstrapJS插件,我们只需要将文档实例中代码粘到我们自己代码中 > 然后作出相应样式调整 Bootstrap中轮播图插件叫作Carousel..."图路径")     + 通过JS方式获取屏幕宽度;     + 判断屏幕宽度是否小于一定值(如:768)     + 根据判断情况决定使用具体图还是小图 三、javascript...< 768; // 判断屏幕属于还是小 3 // 根据大小为界面上每一张轮播图设置背景 4 // $('#main_ad > .carousel-inner > .item') // 获取到是一个..., - 当用户手动调整页面宽度过后没有及时发生变化, - 所以我们可以通过windowresize事件中重新完成以上操作来解决这个问题 1 function 窗口变化后执行函数名(){ 2 //...整个板块超小屏幕下是隐藏起来 + 只需要给当前板块加上hidden-xsclass

6.2K40

JavaScript小技能: 应用程序接口​

: 调用 fetch() 将返回一个“响应”或抛出一个错误 适当地方有额外安全机制: 代码中启用一些 WebAPI 请求权限,例如定位权限和通知权限 1.1 JavaScript、API和其他...II 客户端 API(浏览器 API) 在这里插入图片描述 window 是载入浏览器标签,使用这个对象可返回窗口大小(Window.innerWidth和Window.innerHeight),...函数:`go(url);` document(浏览器中用 DOM 表示)是载入窗口实际页面,可以用这个对象来返回和操作文档中 HTML 和 CSS 上信息。...,每次窗口调整大小时都会触发该事件 。...//不管窗口大小是多少,确保应用程序和它所在窗口视图一样 window.onresize = function() { WIDTH = window.innerWidth; HEIGHT

1.2K30

五. css 布局之 position(定位)

定位元素垂直方向位置由top和bottom两个属性来控制 通常情况下我们只会使用其中一 top值越大,定位元素越向下移动 bottom值越大,定位元素越向上移动 left:定位元素和定位位置左侧距离...- 定位元素和定位位置下边距离 - 定位元素垂直方向位置由top和bottom两个属性来控制...当我们开启了绝对定位后: 水平方向布局等式就需要添加left 和 right 两个值,此时规则和之前一样只是多添加了两个值 当发生过度约束: 如果9个值中没有 auto 则自动调整right...所以如果不指定left和right 则等式不满足时,会自动调整两个值 5.2 垂直方向布局 垂直方向布局等式也必须要满足: top + margin-top/bottom + padding-top...值默认是auto,所以如果不指定left和right 则等式不满足时,会自动调整两个垂直方向布局等式也必须要满足

2.1K41

前端入门4-CSS属性样式表声明正文-CSS属性样式表

本篇文章已授权微信公众号 dasu_Android(苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: 《HTML5权威指南》 《JavaScript权威指南》 MDN web docs...,比如某张图片本来居中显示,但当窗口缩小到比图片还小时,图片就根据窗口进行缩小,此时就可结合 max-width 来实现。...第二个长度值是垂直偏移量(vertical offset)——即阴影从原始盒子中向下偏移距离(或向上,如果值为负)。 第三个长度值是模糊半径(blur radius)——阴影中应用模糊度。...所以此时看到效果就是,浮动元素 div3 是块级元素 div2 下。...如果使用了 top 来调整位置,那么参考点就是参考元素左上角 如果使用了 bottom 来调整位置,那么参考点就是参考元素首屏页面的左下角 为什么强调首屏,因为参考元素大小可能是超出一个屏幕,bottom

1.6K30

可视化几种屏幕适配方案,总有一种是你需要

假设我们正在开发一个可视化拖拽搭建平台,可以拖拽生成工作台或可视化屏,或者直接就是开发一个屏,首先必须要考虑一个问题就是页面如何适应屏幕,因为我们搭建或开发时一般都会基于一个固定宽高,但是实际屏幕可能大小不一...这个是最简单方案了,相当于不适配屏幕,画布配置了多大实际就是多大,不随屏幕变化而变化,所以各个组件宽高也是配置后不会改变,一般用于尺寸固定且后期不会改变可视化屏。...> 判断窗口宽度和高度是否大于画布宽高,是的话通过left或top来调整: 自适应宽度 即宽度适应屏幕,高度不变,这种方案缺点是垂直方向上会出现滚动条。...实际项目中如果有屏需要适应屏幕,我一般都通过这种方法,优点是简单,缺点是水平或垂直空间上可能会留白,但是背景是全屏,所以效果也不会很差。...: red; position: absolute; left: 50px; top: 50px;"> 我们想要动态根据这个div大小和位置复制一个div: <div ref="el2"

2.9K41

FusionCharts参数说明补充

100] showDivLinues            是否显示Div值,默认??...更多控制权动态调整  v3推出两种模式图表大小- exactFit和noScale 。 noScale使用基于像素大小exactFit模式,您可以调整基础上百分比。...此外, exactFit模式允许动态调整,当容器对象(浏览器,表,分区等)调整大小。 ...高级钻取功能  图表项目现在可以链接到新窗口,弹出式,框架或自我窗口。  垂直分工之间界线任何两个数据点。  图表,现在你可以选择垂直分工之间界线任何两套数据。...exportTargetWindow _self or _blank 服务器端情况下使用时,导出作为行动下载,这个左派配置是否返回图片/ PDF格式将在同一窗口中打开作为附件下载(),或是否会打开一个新窗口

3K10

HTML、CSS、JavaScript学习总结

,一般使用分桢框架页会经常使用 _blank 窗口打开 _self 同一个框架或窗口中打开,该项一般不用设置 _top 浏览器整个窗口中打开,忽略任何框架 链接路径 – 绝对路径:包含了标识...一个代表水平位置,一个代表垂直位置。水平位置参考点是网页页面的左边,垂直位置参考点是页面的上边。 Ø 关键字水平方向主要有left、center、right,表示居左、居中和居右。...关键字垂直方向主要有top、center、bottom,表示顶端、居中和底端。其中水平方向和垂直方向关键字可相互搭配使用。...Ø none表示某元素左右两边都允许有浮动元素 层应用 图层创建—— 创建嵌套图层 层属性设置 图层创建—— 基本语法 <div id=”Layer1″ style...• Ø 长度也可使用相对值中百分比。 • 对于每个层设置层大小时,其中只能设置宽度和高度中一个值,另一个值则自动获得。如果两个值都设置了,则还要同时设置层溢出属性overflow。

3K20

屏页面按需解决适配问题

,解决方案位置异常刚开始做完以后PC屏幕上看着正常,浏览器 tab 页签下看效果,由于是屏项目,使用F11全屏看了一下效果后,发现六边形这部分固定设置 top 值,全屏模式下导致整体内容太靠上了由于使用绝对定位...,设置了 top 值,不管是像素还是百分比数值调整不同大小屏幕下兼容性都不太好。...把中间部分内容全部放到 div 中,然后设置整个 div 水平垂直居中,这样整体效果不管是电脑屏幕,还是全屏模式看着都在中间位置了内容重叠笔记本上浏览右上角内容重叠了由于中间部分图片都是静态宽高,图片和文字内容都是根据相对定位进行处理...,这种就只能整体进行调整了,最好是整体缩放形式,这样效果在不同屏幕上还能保持一致这里使用了 zoom 属性,由于用 Vue2, mounted() 中设置一下......,则默认缩放比例为 100%,如果屏幕宽度小于多少,分别设置 90%, 80% 等对应比例由于我们用浏览器开发,如果用户手动改变浏览器窗口大小,通过监听浏览器窗口变化,动态调整缩放比例,这样效果就能满足大部分场景了注意

12111
领券