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

最新推荐文章于 2022-08-13 12:48:18 发布

原创最新推荐文章于 2022-08-13 12:48:18 发布 · 2.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#固定header高度 #动态改变

web前端专栏收录该内容

2 篇文章

订阅专栏

这篇博客探讨了如何在浏览器窗口大小调整时，通过CSS和JavaScript实现header、footer固定，aside宽度固定，以及动态调整aside高度和content区域的高度与宽度，确保页面的响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 id="content">
 content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content\
    content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content
</div>
<div class="footer">
    footer
</div>
<script src="changeblePage.js"></script>
</body>
</html>

css

.header{
    height: 40px;
    width:100%;
    position: fixed;
    top:0;
    left:0;
    background-color: #cccccc;

}
.footer{
    height: 40px;
    width:100%;
    position: fixed;
    bottom:0;
    left:0;
    background-color: #cccccc;
}
#aside{
    position: absolute;
    margin:0;
    left: 0;
    top:40px;
    bottom:40px;
    width:100px;
    background-color: antiquewhite;
}
#content{
    position: absolute;
    margin:0;
    left:100px;
    top:40px;
    bottom:40px;
    background-color:salmon;
    overflow: auto;
}

javascript

/**
 * Created by iamwe on 2017/3/9.
 */
var winWidth = 0,winHeight = 0;
function changebleWidthHeight() {
    if (window.innerWidth)
        winWidth = window.innerWidth;
    else if ((document.body) && (document.body.clientWidth))
        winWidth = document.body.clientWidth;
//获取窗口高度
    if (window.innerHeight)
        winHeight = window.innerHeight;
    else if ((document.body) && (document.body.clientHeight))
        winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
    if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
    {
        winHeight = document.documentElement.clientHeight;
        winWidth = document.documentElement.clientWidth;
    }
    document.getElementById("content").style.width = winWidth - 100;
    document.getElementById("content").style.height = winHeight - 80;
    document.getElementById("aside").style.height = winHeight - 80;
}
window.onresize = changebleWidthHeight();