如何让div的宽高始终等于浏览器宽高的一半

简介: 如何让div的宽高始终等于浏览器宽高的一半

本文介绍了如何使用BOM(BrowserObjectModel)和JavaScript的onresize事件,实现在浏览器窗口大小变化时动态调整ID为myDiv的DIV元素的样式,使其宽度和高度自动适应窗口尺寸。

<!DOCTYPE html>
<html>
  <head>
    <title>BOM实现DIV样式</title>
    <style>
      #myDiv {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="myDiv"></div>
 
    <script>
      window.onresize = function() {
        // 获取浏览器窗口的宽度和高度
        let windowWidth = window.innerWidth;
        let windowHeight = window.innerHeight;
 
        // 获取需要设置样式的 DIV 元素
        let myDiv = document.getElementById("myDiv");
 
        // 设置 DIV 的宽度和高度为浏览器窗口大小的一半
        myDiv.style.width = windowWidth / 2 + "px";
        myDiv.style.height = windowHeight / 2 + "px";
        console.log(1);
      }
    </script>
  </body>
</html>
lvbb66
+关注
目录
打赏
0
1
2
0
11
分享
相关文章
|
7月前
|
vue 组件封装 | 随鼠标移动的信息框 (含监听鼠标移动、移出事件,获取元素的宽高、获取浏览器的宽高)
vue 组件封装 | 随鼠标移动的信息框 (含监听鼠标移动、移出事件,获取元素的宽高、获取浏览器的宽高)
66 1
|
7月前
div高度填满浏览器剩余空间(不出现纵向滚动条)
div高度填满浏览器剩余空间(不出现纵向滚动条)
69 0
js如何获得浏览器的宽高
js如何获得浏览器的宽高
72 5
使用 div 实现 input、textarea 输入框,并支持 placeholder 属性(解决浏览器兼容问题)
使用 div 实现 input、textarea 输入框,并支持 placeholder 属性(解决浏览器兼容问题)
249 0
往 p 标签里放了个 div,把浏览器都给整不会了
块级元素: 不管内容多少,块元素都会在浏览器中独占一行。可设置宽高,如果不设置宽高那么它的宽度是100%(占满父级元素一整行)
120 0
往 p 标签里放了个 div,把浏览器都给整不会了
让一个div盒子在浏览器视窗中居中的算法
让一个div盒子在浏览器视窗中居中的算法
206 0
让一个div盒子在浏览器视窗中居中的算法
页面自适应浏览器宽高
autodivheight(); function autodivheight() { //函数:获取尺寸 //获取浏览器窗口高度 var winHeight = 0; if (window.
1087 0
echarts宽高自适应及浏览器大小变化自动刷新
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/81868910 echarts宽高...
2531 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等