使用on resize来设置div高度？
使用onresize来设置div高度是一种常见的前端开发技巧，它可以在浏览器窗口大小改变时动态调整div元素的高度。具体实现步骤如下：
- 首先，给需要调整高度的div元素添加一个唯一的id属性，例如：
<div id="myDiv"></div>。 - 在JavaScript代码中，使用onresize事件监听浏览器窗口大小改变的事件，并在事件触发时执行相应的操作。
- 在JavaScript代码中，使用onresize事件监听浏览器窗口大小改变的事件，并在事件触发时执行相应的操作。
- 上述代码中，
window.onresize表示监听窗口大小改变事件，window.innerHeight表示当前窗口的高度，div.style.height表示设置div元素的高度。 - 最后，为了保证初始加载时div元素的高度正确，可以在页面加载完成后手动触发一次onresize事件。
- 最后，为了保证初始加载时div元素的高度正确，可以在页面加载完成后手动触发一次onresize事件。
使用onresize来设置div高度的优势是可以实现响应式布局，使得div元素的高度能够根据浏览器窗口大小的变化而自动调整，适应不同设备和屏幕尺寸的展示需求。
应用场景：
- 响应式网页设计：通过设置div高度，实现网页布局的自适应，提升用户体验。
- 动态展示：根据浏览器窗口大小的变化，动态调整div元素的高度，以适应不同展示需求。
腾讯云相关产品和产品介绍链接地址：
相关·内容
4回答
怎么买云服务器？
云服务器、5折上云
请描述您的问题
标题：腾讯云云产品新购特惠，五折上云！
地址：https://cloud.tencent.com/act/first_purchase?utm_source=portal&utm_medium=cdb&utm_campaign=firstpurchase&utm_term=0110
浏览器信息
Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
浏览 478提问于2018-03-12
2回答
元素在设置window.onresize时不调整大小。
javascript、web
我最近开始学习web开发，特别是Javascript，我正在尝试编写一些简单的函数来提高我对语言的掌握。我编写了一个函数来调整框的高度，使其与窗口成比例，但由于某种原因，它不起作用--每次调整浏览器窗口大小时，调整大小函数都不会更新页面。我觉得自己犯了一些非常愚蠢的错误，但因为我不熟悉Javascript，所以我搞不懂它是什么。
我的HTML非常简单：
<body>
<div id = "box">Hi.</div>
</body>
Javascript代码是：
function resizeToScreen(element, p
浏览 1提问于2013-06-20得票数 0
3回答
从javascript var设置样式值
javascript、html、css、styles、height
我想设置表格中单元格的高度，但我想动态地设置。我从javascript获取窗口的高度，然后将其嵌入div样式。
<script language="javascript">
var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth;
var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;
if (height>900 )
{
set_height
浏览 4提问于2014-03-03得票数 0
回答已采纳
2回答
如何在CSS中创建调整窗体宽度的javascript脚本？
javascript、html、css
基本上，我试图做的是创建一个表单，供人们输入他们的电子邮件，以获得一些信息。我想为桌面和移动视图创建一个html文件，这样当窗口较窄时窗体宽度占屏幕的75%，窗口较宽时占屏幕宽度的35%。我的脚本现在会在html文档第一次加载时创建正确大小的窗口，但是当我调整窗口大小时，它不会调整大小。我的代码哪里做错了？
<div id="center" class="container-fluid" font-size=13px; onresize="resize()">
<script>
浏览 29提问于2018-07-11得票数 1
3回答
防止在使用jquery更改css属性时触发窗口调整大小事件
javascript、jquery、html、css
我已经在我的页面上添加了一个窗口大小调整事件，每当页面大小改变时都会调用它。
但是，当我使用jquery css更新页面中div元素的CSS值并将其动画化时，会自动触发窗口大小调整事件。
只有IE才会发生这种情况
我想防止在通过动画或css方法手动更改大小时执行调整大小事件
以下是我的代码
用于调整窗口大小
window.onresize=function(){ ... };
用于div大小更改
$('div#divtest').css({ 'position': 'absolute', 'z-index': '1'
浏览 61提问于2016-08-17得票数 1
回答已采纳
1回答
在KineticJS中动态调整画布大小
kineticjs
我们如何在通过KineticJS创建的画布中实现以下功能。
随着浏览器窗口大小的改变，画布及其包含的形状应相应地适合舞台。
我尝试过在jsfiddle中关注，
var stage = new Kinetic.Stage({
container: 'container',
width: 800,
height: 600
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x:
浏览 2提问于2013-12-25得票数 0
4回答
为不同大小的浏览器窗口动态应用不同的样式表
javascript、css
如果浏览器高于或低于某个高度，我将使用以下代码选择一个不同的样式表。当你停留在页面上，或者如果你调整窗口大小然后刷新时，效果很好。但是，在调整窗口大小时，有没有什么方法可以让我动态地选择正确的样式表？
if (window.innerHeight <= 900) {
loadcss('css/container_sm.css');
} else {
loadcss('css/container_lg.css');
}
function loadcss(file) {
var el = document.createElement(
浏览 3提问于2012-05-15得票数 1
1回答
在DIV中正确地安装引导图标，保持响应性。
javascript、html、css、twitter-bootstrap-3、glyphicons
我不知道这是否可能，我已经尝试了我所能做的一切，但都没有结果。其想法是让一个图标(或自制字体)始终保持与包含的DIV相同的大小。自举3.3.7
下面是代码: CSS
#insidewrap {
background-color: #FFD;
border: 3px dashed green;
z-index: 2;
padding: 0;
height:400px;
}
.big_box {
width: 60vw;
border: 1px solid red;
float: none;
margin: 0 auto;
}
.icon_size {font-size: 60vw;}
HTML
浏览 2提问于2018-05-03得票数 1
回答已采纳
2回答
在窗口大小调整时运行jQuery脚本
javascript、jquery、html
我有一些脚本可以在窗口大小调整时运行各种函数，
$.event.add(window, 'load', resizeFrame);
$.event.add(window, 'resize', resizeFrame);
function resizeFrame(){
// various scripts //
}
这是非常好的工作，我在那里运行的脚本也工作。然后，我有了一个单独的脚本，它在文档加载上设置各种div的高度，这也很好。
var h = 0,
target = $('.home #content .items-row .ite
浏览 2提问于2014-07-11得票数 1
回答已采纳
4回答
之前买的服务器可以退款么？
费用中心、5折上云
之前买的服务器可以退款么？你这活动力度好大啊
标题：腾讯云云产品新购特惠，五折上云！
地址：https://cloud.tencent.com/act/first_purchase?utm_source=portal&utm_medium=banner&utm_campaign=firstpurchase&utm_term=0109
浏览器信息
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
浏览 1592提问于2018-01-20
2回答
CSS相对定位
javascript、html、css
我正在开发一个具有动态尺寸的网页，即我首先读取画布的大小，并相应地调整元素的宽度和高度。
if(!window.JSFX)
JSFX=new Object();
if(!JSFX.Browser)
JSFX.Browser = new Object();
if(navigator.appName.indexOf("Netscape") != -1)
{
JSFX.Browser.getCanvasWidth = function() {return innerWidth;}
JSFX.Browser.getCanvasHeight =
浏览 0提问于2010-01-21得票数 1
回答已采纳
1回答
在window.onresize中不使用TypeScript更新阶段(0.9.1.1)
javascript、html、typescript、window-resize
我有绘制到html5画布的Renderer类，我希望它在调整窗口大小时重新绘制内容。问题是，update()代码只执行一次--在初始化()中--而调整窗口大小不会做任何事情。另一方面，每次调整窗口大小时都会执行onWindowResized()。那么，哪里有错误呢？
/// <reference path="../lib/easeljs.d.ts" />
/// <reference path="../lib/tweenjs.d.ts" />
/// <reference path="../lib/soundjs.d.ts&
浏览 1提问于2013-10-07得票数 2
回答已采纳
2回答
如何在JavaScript中获得更新的高度和宽度？
javascript
如何通过javascript不断地获取浏览器的宽度和高度？只需使用document.body.clientWidth或window.innerWidth即可在页面加载后给出宽度。
但是，当用户调整窗口大小时，如何获得更新的宽度和高度？
浏览 0提问于2014-09-29得票数 0
2回答
使用JavaScript根据窗口/视口高度动态调整图像大小
javascript、image、layout、resize、fluid
我正在尝试为摄影师设计一个网站，将调整图像和缩略图的高度，使它们适合用户的窗口大小。这是我第一次尝试流动布局，而不是固定宽度的布局。
图像需要根据浏览器的高度调整大小，并且必须保持纵横比。
为了更清楚地了解我的意图，您可以查看我的两个设计(很多工作正在进行中
(此设计将有两行或三行缩略图，需要根据窗口的高度调整大小)
(这个设计将只有一排图像(一个幻灯片)，再次调整大小以适应窗口的高度)。
到目前为止，我只做了一个小测试来访问图像的.width DOM元素并对其进行更改，但我似乎无法让它正常工作，并且有点超出了我的能力范围，因为我在这里可以说是在快速学习JavaScript！
我希望我已经
浏览 1提问于2012-09-14得票数 0
3回答
调整DIV大小，但在调整窗口大小时保持纵横比
javascript、css
我的页面中有一个DIV元素，我想在调整窗口大小时调整它的大小，但要保持正方形的纵横比。我希望将宽度设置为浏览器宽度的50%，并将高度设置为等于宽度。我该怎么做呢？
如果解决方案需要Javascript，那也没问题，但我不喜欢使用jQuery。
浏览 2提问于2012-04-08得票数 3
回答已采纳
2回答
通过调整窗口大小动态更改div高度
javascript、window-resize
我想在调整窗口大小时改变div的高度。我知道它可以通过css使用height:100%;来完成，但这并不能满足我的需求。我想在没有JQuery或任何其他框架的纯javascript中实现这一点。
以下是我所做的工作：
<div id="left">
<div id="inner">
</div>
</div>
CSS
#left{
margin-top:40px;
width:200px;
height:576px;
background:white;
}
#inner{
height:100%;
over
浏览 0提问于2013-07-18得票数 4
2回答
Javascript自动屏幕尺寸测试
javascript、css、ipad、html
在aLL中，我使用了一个javascript代码，当选择一个链接时，一个图像将慢慢弹出，并慢慢地使背景变黑。当按下ipad时，并不是所有的背景都会变成黑色！在CSS中，我已经设置了背景将占据100%的屏幕，这是我的代码:CSS的一部分：
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
width:100%;
height:100%;
top:0;
left:0;
backg
浏览 0提问于2012-03-19得票数 0
3回答
使用javascript检测div宽度何时更改
javascript、html
我是javascript中的新手，当div with被更改时，我想执行一些操作。
在jquery中，我使用以下代码
var width = $(window).width();
$(window).resize(function(){
if($(this).width() != width){
width = $(this).width();
console.log(width);
}
});
但我想用javascript帮我.
浏览 1提问于2016-10-04得票数 1
回答已采纳
7回答
Highcharts如何拥有动态高度的图表？
javascript、highcharts
我想要一个随浏览器窗口调整大小的图表，但问题是高度固定为400px。也有同样的问题。
我该怎么做呢？我尝试使用chart.events.redraw事件处理程序(使用.setSize)来调整图表的大小，但我猜它会启动一个永无止境的循环(触发事件处理程序，它调用setSize，然后再触发另一个事件处理程序，等等)。
浏览 2提问于2012-01-11得票数 39
回答已采纳
4回答
如何使用javascript查找最大用户浏览器窗口宽度和当前
javascript
我正在寻找一种方法，使用javascript来找到访问者浏览器窗口的宽度和高度，但我也想找到最大的窗口大小，所以如果用户使窗口变小或变大，一些元素会自动改变位置或大小，如facebook聊天。有什么建议吗？
浏览 0提问于2013-03-11得票数 6
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
