如何从绝对定位切换为静态/相对定位实现全屏分栏网页布局？

绝对定位确实是个坑，尤其是要处理这么多模块的时候，维护起来简直头疼！我推荐你用Flexbox来实现这个布局，这个现代CSS布局工具能完美解决你的问题，不用再跟绝对定位的繁琐定位和margin失效问题较劲。

先给你理清楚核心思路：

• 一个全屏容器，左右分栏各占屏幕宽度的50%
• 每一栏内部采用垂直方向的Flex布局，分为「顶部固定栏」「中间自适应区域」「底部固定栏」
• 顶部和底部栏固定高度50px，中间区域自动填充剩余垂直空间
• 所有模块都在正常文档流中，轻松设置间距

完整实现代码 #

HTML结构（用div替代table，语义化更强）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全屏分栏布局</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <!-- 左侧分栏 -->
        <div class="column left-column">
            <div class="bar top-bar">
                <div class="item">01</div>
                <div class="item">02</div>
                <div class="item">03</div>
                <div class="item">04</div>
            </div>
            <div class="middle-area">05</div>
            <div class="bar bottom-bar">
                <div class="item">06</div>
                <div class="item">07</div>
                <div class="item">08</div>
                <div class="item">09</div>
            </div>
        </div>

        <!-- 右侧分栏 -->
        <div class="column right-column">
            <div class="bar top-bar">
                <div class="item">10</div>
                <div class="item">11</div>
                <div class="item">12</div>
                <div class="item">13</div>
            </div>
            <div class="middle-area">14</div>
            <div class="bar bottom-bar">
                <div class="item">15</div>
                <div class="item">16</div>
                <div class="item">17</div>
                <div class="item">18</div>
            </div>
        </div>
    </div>
</body>
</html>

CSS样式（实现全屏+弹性布局）

/* 全局初始化，消除默认边距，统一盒模型 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 让html和body铺满全屏，隐藏滚动条 */
html, body {
    height: 100%;
    overflow: hidden;
}

/* 外层容器：水平方向的Flex布局，左右分栏平分宽度 */
.container {
    display: flex;
    height: 100%;
    gap: 16px; /* 左右分栏之间的间距，可自定义 */
    padding: 8px; /* 容器和屏幕边缘的间距，可自定义 */
}

/* 左右分栏：垂直方向的Flex布局，占据相等宽度 */
.column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px; /* 分栏内部上下模块的间距，可自定义 */
}

/* 顶部和底部固定栏：固定高度50px，水平方向平分内部模块 */
.bar {
    height: 50px;
    display: flex;
    gap: 4px; /* 栏内小模块之间的间距，可自定义 */
}

/* 栏内小模块：平分栏的宽度 */
.bar .item {
    flex: 1;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 中间自适应区域：填充分栏剩余的垂直空间 */
.middle-area {
    flex: 1;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

方案优势 #

• 摆脱绝对定位：所有元素都在正常文档流中，不用手动计算每个模块的top/left，维护成本极低
• 轻松设置间距：通过gap属性（或margin）就能给分栏、模块之间设置间距，完全不会有失效问题
• 自适应全屏：不管屏幕尺寸怎么变化，布局都会自动适配，始终保持全屏无滚动的效果
• 语义化结构：用div替代table，更符合现代网页开发的语义化规范，可读性更强

内容的提问来源于stack exchange，提问作者Ralf