自适应布局-绝对定位填充

最新推荐文章于 2024-03-20 11:23:32 发布

qq444616055

最新推荐文章于 2024-03-20 11:23:32 发布

阅读量639

点赞数

分类专栏：页面布局文章标签：以适应布局绝对定位填充

本文链接：https://blog.csdn.net/qq444616055/article/details/102758630

版权

页面布局专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文探讨了如何利用绝对定位填充实现自适应页面布局。这种布局方式具有良好的兼容性和灵活性，适应多种场景，但需谨慎规划元素宽高及父元素定位属性。

摘要由CSDN通过智能技术生成

使用绝对定位填充进行页面布局，页面可以自适应窗口大小。
优点：兼容性好，灵活，适用于大部分场景。
缺点：需要规划好父元素、兄弟元素的宽高。父元素的position需要是absolute或者relative。
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <title>自适应布局-绝对定位填充</title>
</head>

<body>
    <div class="headContainer">
        顶部菜单栏
    </div>
    <div class="bodyContainer">
        <div class="leftMenuCont">
            左侧菜单栏
        </div>
        <div class="panelCont">
            正文
        </div>
    </div>
</body>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        font-size: 100%;
    }

    body {
        min-width: 400px;
        min-height: 400px;
    }

    .headContainer {
        width: 100%;
        height: 50px;
        background-color: tan;
    }

    .bodyContainer {
        position: absolute;
        width: 100%;
        top: 50px;
        bottom: 0;
    }

    .leftMenuCont {
        width: 300px;
        height: 100%;
        background-color: yellowgreen;
    }

    .panelCont {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 300px;
        right: 0;
        background-color: #f1f1f1;
    }
</style>

</html>