`

JS 实现DIV随浏览器窗口大小变化

 
阅读更多

以下是宽度变化的示例,高度也可参考:

01 <script type= "text/javascript" >
02    function initWidth() {
03          var bodyWidth = document.compatMode == "BackCompat" ?document.body.clientWidth:document.documentElement.clientWidth;
04          document.getElementById( "Content" ).style.width = bodyWidth - 180;
05      }
06      initWidth();
07      if (document.attachEvent) {
08          window.attachEvent( 'onresize' , initWidth);
09      } else {
10          window.addEventListener( 'resize' , initWidth, false );
11      }
12 </script>
分享到:
评论
1 楼 开发小菜 2014-02-19  
什么意思,没明白?能不能写一个例子

相关推荐

    JS根据浏览器窗口大小实时动态改变网页文字大小的方法

    本文主要介绍如何使用JavaScript实现根据浏览器窗口大小动态调整网页文字大小的功能。该技术在实现网页响应式设计中具有重要意义,允许网页内容在不同尺寸的屏幕设备上都能保持良好的可读性和布局适应性。 首先,...

    使用JS+CSS实现DIV层自适应高度和宽度

    我们了解了CSS基础知识、JavaScript基础知识、获取浏览器窗口的高度、实现DIV层自适应高度、实现DIV层自适应宽度和监听窗口resize事件等知识点。这些知识点将帮助我们更好地实现网页的自适应设计。

    jQuery响应浏览器窗口大小图片排列代码.zip

    本篇文章将详细讲解一个利用jQuery实现的响应式图片排列代码,该代码旨在使图片画廊根据浏览器窗口大小自动调整布局,以达到视觉上的统一和和谐。 首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、...

    FitText.js文字字体大小自适应浏览器窗口大小

    FitText.js是一款JavaScript库,专为网页设计师设计,旨在实现文字字体大小的动态自适应,以根据浏览器窗口的尺寸变化自动调整。这个功能在响应式网页设计中尤其有用,因为它可以确保无论用户如何缩放浏览器窗口,...

    css+div自适应窗口宽度

    本主题探讨的是如何利用CSS和div实现网页内容的自适应窗口宽度,确保无论用户浏览器窗口大小如何,页面都能保持良好的显示效果。 首先,我们要理解`min-width`属性。在示例代码中,`.divGlobal`, `.DivTop`, `....

    动态网格布局jQuery插件(改变浏览器窗口大小 自动变化)

    本文将深入探讨“动态网格布局jQuery插件”这一主题,它能够实现当浏览器窗口大小发生变化时,页面布局能自动适应调整,保持良好的视觉效果。 一、jQuery简介 jQuery是由John Resig于2006年创建的一个开源项目,它...

    js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动).docx

    JS+CSS 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 本文将详细介绍使用 JS 和 CSS 实现遮罩居中弹出层,并且随浏览器窗口滚动条滚动。该弹出层能够在浏览器窗口中居中显示,且随着浏览器窗口的滚动而滚动。 ...

    JS控制网页背景随窗口大小自动适应

    本文将详细介绍如何使用JavaScript来实现网页背景图片随浏览器窗口大小的变化而自动调整尺寸的功能。这一技术在响应式设计中非常实用,能够让网站在不同设备上呈现出更好的视觉效果。 #### HTML结构解析 首先,...

    vue终极解决多个页面Echart随页面窗口大小而改变图形大小方法

    然而,当遇到多个ECharts图表分布在多个页面上,并且需要根据浏览器窗口大小动态调整图形尺寸时,可能会遇到一些挑战。本文将详细介绍一种终极解决方案,确保每个页面上的ECharts图表都能正确响应窗口尺寸的变化。 ...

    asp.net 控件随着窗口大小按比例变化源码

    总之,学习如何在ASP.NET中实现控件随窗口大小按比例变化,可以帮助开发者创建更加用户友好的Web应用,无论用户使用何种设备或浏览器,都能提供一致的视觉体验。通过研究提供的源码,开发者可以深入了解响应式设计的...

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

    标题中提到的是“JS实现DIV高度自适应窗口示例”,这表示我们要探讨如何利用JavaScript(简称JS)编写代码,使得网页中的一个特定的 DIV(即文档对象模型中的一个容器元素)能够根据浏览器窗口大小的变化而动态调整...

    JavaScript改变地图DIV大小

    6. **事件监听**:如果你希望地图大小随着浏览器窗口的变化而自动调整,可以监听`resize`事件。 ```javascript window.addEventListener('resize', function() { map.updateSize(); }); ``` 通过以上步骤,你...

    js拖动div并拖动DIV的大小

    在JavaScript中,实现一个div元素的拖放以及调整大小的功能是一项常见的需求,尤其在构建交互式的Web应用时。这个功能涉及到HTML、CSS和JavaScript的综合运用。以下将详细讲解实现这个功能所需的关键知识点: 1. **...

    JS可拖动窗口控件,可实现各种DIV窗口自定义及各种DIV弹出提示框 带遮罩层的DIV窗口/对话框控件 js javascript 对话框

    其次,"DIV窗口自定义"意味着你可以自由配置窗口的大小、样式、内容等属性。开发者可以利用CSS控制窗口的布局、边框、背景色、透明度等,同时通过JavaScript动态修改DOM元素属性,以实现窗口的动态调整。 "带遮罩层...

    自适应窗口大小背景.zip

    总结起来,"自适应窗口大小背景.zip"提供的解决方案是利用JavaScript动态调整背景图像的大小,以适应窗口变化。这种方法结合了CSS3的`background-size`属性和JavaScript的事件监听,确保在不同分辨率和屏幕尺寸下,...

    js使用div模拟拖动窗口控件

    这个项目通过结合JavaScript(简称js)和XSLT(可扩展样式表语言转换)技术,实现了一个用div元素模拟的可拖动、可调整大小的窗口功能。下面我们将深入探讨这一技术的核心知识点。 首先,我们需要理解`div`元素在...

    实现div 遮罩 frameset

    这需要通过JavaScript获取框架的位置和大小,然后相应地调整`div`的样式。这样,用户可以在框架内的任意位置触发弹出层,而弹出层仍然能够正确显示并具有交互性。 在压缩包文件“框架弹出层的运用”中,可能包含了...

    漂亮的div弹出窗口样式

    例如,`absolute`可以使弹出窗口相对于其最近的非`static`定位祖先元素定位,而`fixed`则使其相对于浏览器窗口定位。 4. **过渡效果(transitions)**:为了让弹出窗口的出现和消失更加平滑,可以使用CSS的`...

    通过JavaScript使Div居中并随网页大小改变而改变

    但是,随着Web技术的发展,JavaScript也常被用来实现Div的动态居中效果,尤其是在需要响应网页大小变化时重新计算Div位置的场景。 在介绍JavaScript实现Div居中的方法之前,我们先来理解CSS实现居中的基本原理。...

    jQuery监听浏览器窗口大小的变化实例

    关于如何使用jQuery来监听浏览器窗口大小的变化,本文将详细介绍两种常见的方法,并提供相应的代码示例。这对于动态地适应不同浏览器窗口尺寸的网页设计非常有用,可以帮助开发者确保网页内容在各种分辨率下的显示...

Global site tag (gtag.js) - Google Analytics