浏览器窗口大小改变时，动态改变div高度和宽度

最新推荐文章于 2023-02-27 10:43:12 发布
最新推荐文章于 2023-02-27 10:43:12 发布
阅读量2.2k 收藏 3
点赞数
分类专栏： web前端 文章标签： 固定header高度 动态改变
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weigangyuta/article/details/60966176
版权
这篇博客探讨了如何在浏览器窗口大小调整时，通过CSS和JavaScript实现header、footer固定，aside宽度固定，以及动态调整aside高度和content区域的高度与宽度，确保页面的响应式布局。
摘要由CSDN通过智能技术生成

header、footer高度固定，aside宽度固定，当浏览器窗口大小改变时，动态改变aside高度，content高度和宽度。

页面布局
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>changeble</title>
    <link rel="stylesheet" href="changeblePage.css"/>
</head>
<body>
<div class="header">
    header
</div>
<div id="aside">
    aside
</div>
<div
最低0.47元/天 解锁文章
weigangyuta
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
10-22
本文主要介绍如何使用JavaScript实现根据浏览器窗口大小动态调整网页文字大小的功能。该技术在实现网页响应式设计中具有重要意义，允许网页内容在不同尺寸的屏幕设备上都能保持良好的可读性和布局适应性。 首先，...
解决css中div随窗口大小变化而变化
烟溪彭于晏的博客
07-12 9820
本来还很好看一旦缩放窗口，就成了这样 恶心吐了要。经过查找，给div添加下面css可解决，意思是强制在同一行展示，窗口缩放之后也是一样。这样子就顺眼多了 但是这样又有了一个麻烦，原本两行的内容，现在只能在一行展示，势必会挤压其他div的空间，导致图片又变小了。我们又只能通过强制换行了，如果只能通过强制换行而不是自动换行多多少少肯定还是有问题的。还有一个办法在其父元素加上以下样式，这样就不会因为 white-space：nowrap而影响布局。但是缺点也显而易见的，字体已经越界了。......
div根据屏幕缩放进行比例缩放
偷得浮生半日闲
08-13 3546
在一些视频类网站，视频的 div 宽度会跟随浏览器的大小进行比例缩放，一般来说，我们 div 设置宽度 100% ， 高度写死，宽度可以根据屏幕缩小而改变 div 的宽度，但是高度不会变化，如果想要 div 的高度也随着宽度的变化而变化呢？......
浏览器缩小引发的样式改变的问题
菜不是原罪
11-25 1798
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 不想让它缩小，就设置 flex-shrink:0; text-align: center 如何做到像百度那样使用了text-align后，缩小网页时，元素位置不会自动跟随浏览器窗口大小而改变 如何做到像百度那样使用了text-al...
浮动后缩放或调整浏览器大小导致塌陷 和 通过绝对定位来实现宽度高度自适应
qq_42339350的博客
02-19 848
1.浮动后缩放或调整浏览器大小导致塌陷 正常情况 缩放或调整了浏览器大小导致了塌陷 解决方法 父元素设置指定宽度(width或者min-width) 2.通过绝对定位来实现宽度高度自适应 问题 a，b 左浮动，c右浮动.怎么能让b在不同的缩放和浏览器大小下自动填满中间呢？ 解决方法 利用绝对定位 .left{ float: left; width: 300px; } .middle{ position: absolute; left: 300px;
html在div大小变化而变化,怎么让这个页面的高度跟着div的高度变化？
weixin_34017901的博客
06-07 444
我是下面这样布局的 我点击按钮后中间的这个div变长了 超过1000px了 但是最外层的div没有跟着变化 我给最外层的div设置min-height：1000px也不行 这样设置后不但没有跟着变化反而变成了图片中的样子 这是为什么？怎样让里面这三个div的高度始终一样呢？*{margin:0;padding: 0;}#main{width: 100%;height: 1000px;backg...
jquery动态调整div大小使其宽度始终为浏览器宽度
10-25
// 当窗口大小改变时，重新获取浏览器宽度 $("div.show").css("width", browser_width); // 更新div的宽度 }); ``` 在jQuery中，`$(document.body).width()`用于获取浏览器内容区域的宽度。当我们首次加载页面...
jQuery监听浏览器窗口大小的变化实例
10-20
关于如何使用jQuery来监听浏览器窗口大小的变化，本文将详细介绍两种常见的方法，并提供相应的代码示例。这对于动态地适应不同浏览器窗口尺寸的网页设计非常有用，可以帮助开发者确保网页内容在各种分辨率下的显示...
jQuery响应浏览器窗口大小图片排列代码.zip
07-11
在本例中，jQuery被用来监听浏览器窗口的resize事件，动态调整图片的布局和尺寸，确保无论用户如何改变窗口大小，图片都能保持良好的展示效果。 该代码的核心原理是利用CSS3的媒体查询（Media Queries）来设置不同...
JavaScript改变地图DIV大小
12-14
地图在Web页面上通常被嵌入到一个`<div>`中，通过JavaScript来控制其样式属性，如宽度和高度，从而改变地图的显示大小。 要实现JavaScript改变地图`<div>`大小，你需要以下步骤： 1. **创建地图Div**：在HTML中，...
Element表格高度根据浏览器窗口大小动态改变
chenlim87的博客
03-10 3527
`el-table`默认展示20条数据时，表格高度可能会超出当前页面的高度，此时页面会出现滚动条，我们往下拖动的时候表格下方的数据是可以呈现出来，但表头可能就被页面遮挡住了。那往下拖动时怎么固定住表头呢？Element文档里说了，可以加`height`属性。 比如： <el-table :data="tbData" stripe border height="500"></el-table> 给`height`一个高度，这样是可以解决表头固定的问题。但是又会出现一.
js 拖动--动态改变div的宽高大小
wwf1225的博客
02-27 2920
/ 拖拽后物体的高。// 拖拽后物体的宽。// 获取拖拽前div的高。// 获取拖拽前div的宽。// 获取鼠标按下时光标x的值。// 获取鼠标按下时光标Y的值。// 拖拽前div的高。//拖拽前div的宽。
div随着浏览器窗口大小变更，改变大小（resize）
热门推荐
xuanlv_haoshao的博客
04-01 4万+
浏览器的放大缩小会导致网页布局变动，jquery的resize()方法，可以根据浏览器的窗口大小的变动，对网页进行操作：以下是div随着浏览器窗口大小变更，改变大小（resize）的案例：html:js效果：resizeDiv的块会根据网页变更，大小也随之改变...
jquery动态改变div宽度和高度
u011927449的博客
07-07 1881
效果体验：http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head&g.
动态添加div的宽度和高度
panghubupang的博客
07-19 3万+
很多小伙伴会遇到动态给元素添加宽度和高度的需求 直接上代码 <div :style="{height:number + 'px'}"></div> number可以在js中赋值这样就可以使用动态的高了 宽度也是一样的写法
div高度根据内容自适应_Web开发实用技能，看Kendo UI如何定义网格高度
weixin_39596835的博客
11-29 169
点击“了解更多”获取Kendo UI for jQuery R2 2020 SP1试用版下载Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。Heig...
js实现div动态改变大小
bei_fang_du_lang的专栏
02-03 1万+
网上看到的相关代码，记下，以备日后使用。 body { margin:0; padding:0; } #header { height: 70px; background-color: Blue;
vue 适配浏览器窗口大小
最新发布
06-01
在Vue中，可以使用`window`对象的`resize`事件来监听浏览器窗口大小的变化，并根据窗口大小调整组件的样式。 首先，你需要在Vue组件的`mounted`生命周期钩子中添加一个事件监听器： ```vue <template> <div class="my-component"> <!-- 组件内容 --> </div> </template> <script> export default { name: 'MyComponent', mounted() { window.addEventListener('resize', this.handleResize) }, methods: { handleResize() { // 处理窗口大小变化的逻辑 } } } </script> ``` 在`handleResize`方法中，你可以根据窗口大小调整组件的样式。例如，你可以使用`window.innerWidth`和`window.innerHeight`属性获取窗口的宽度和高度，然后针对不同的窗口大小调整样式。 ```vue <template> <div :style="containerStyle" class="my-component"> <!-- 组件内容 --> </div> </template> <script> export default { name: 'MyComponent', data() { return { containerStyle: { fontSize: '16px' } } }, mounted() { window.addEventListener('resize', this.handleResize) this.handleResize() }, methods: { handleResize() { if (window.innerWidth <= 600) { this.containerStyle.fontSize = '14px' } else { this.containerStyle.fontSize = '16px' } } } } </script> ``` 在这个例子中，组件的容器样式根据窗口大小动态调整了字体大小。当窗口宽度小于等于600px时，字体大小为14px，否则为16px。 当组件销毁时，你需要记得移除窗口大小变化的事件监听器，以避免内存泄漏。 ```vue <script> export default { name: 'MyComponent', mounted() { window.addEventListener('resize', this.handleResize) }, beforeDestroy() { window.removeEventListener('resize', this.handleResize) }, methods: { handleResize() { // 处理窗口大小变化的逻辑 } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值