html自适应页面上下左右分栏的处理技巧

最新推荐文章于 2024-08-12 16:37:54 发布

freeWayWalker

最新推荐文章于 2024-08-12 16:37:54 发布

阅读量2.7w

点赞数

分类专栏： Web notes 文章标签： jquery css html

本文链接：https://blog.csdn.net/freeWayWalker/article/details/12388921

版权

Web notes 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

html自适应页面上下左右分栏的效果可以借用CSS或者jQuery进行处理。

CSS中的width和height属性的值带%的情况：

height:100% 代表基于包含它的块级对象（即父元素）的百分比高度，此时为100%。

width:100% 代表基于包含它的块级对象（即父元素）的百分比宽度，此时为100%。

使某元素（例如id为container的元素）占据整个页面的全部时的CSS代码如下：

#container {
    width: 100%;
    height: 100%;
}

简单的带有的头注和脚注页面实例：

<html>
    <head>
        <style>
            html,body {margin:0;padding:0;
            }
            #mainContainer {
                height:100%;
                width:100%;
            }
            #header {
                height:15%;
                width:100%;
                background-color:red;
            }
            #center {
                height:75%;
                width:100%;
                background-color:blue;
            }
            #footer {
                height:10%;
                width:100%;
                background-color:pink;
            }
        </style>
    </head>
    <body>
        <div id="mainContainer">
            <div id="header">Header</div>
            <div id="center">Center</div>
            <div id="footer">Footer</div>
        </div>
    </body>
</html>

假如当一个父元素中有两个或多个元素时，需要其中一个元素占据除其他元素所占的空间之外剩下的所有空间，则可以在页面初始化后通过jQuery修改它的高度和宽度属性。

例如，其他元素总共占父元素高70像素、宽25像素的空间且都在一成片区域，父元素宽也为25像素。

// 页面初始化后调用
$(document).ready(function () {
    // 使窗口最大化
    if (document.body.offsetWidth < screen.width) {
        try {
            window.moveTo(0, 0);
            window.resizeTo(window.screen.availWidth, window.screen.availHeight);
        } catch (e) {
            throw e;
        }
    }
    // 使mainContent的高度为父元素的全部高度减去70像素的高度
    $(".mainContent").css('height', '100%').css('height', '-=70px');
    // 使mainContent的宽度为父元素的全部宽度减去25像素的宽度
    $(".mainContent").css('width', '100%').css('width', '-=25px');
});

参考自：css width: calc(100% -100px); alternative using jquery http://stackoverflow.com/questions/11117216/css-width-calc100-100px-alternative-using-jquery