如何仅用HTML/CSS实现三栏布局侧边栏随中间内容同步等高拉伸

• 你当前使用浮动实现三栏布局，height: 100% 生效的前提是父元素有明确的固定高度值，你给main设置的是height: auto，没有明确高度，所以侧边栏的100%高度声明无效，只能收缩到自身内容高度。
• 浮动元素本身没有让兄弟元素等高的原生特性，无法自动实现侧边栏跟随中间内容高度拉伸的效果。

用Flex布局重构main部分的布局即可，无需修改HTML结构，核心修改点如下：

1. 给main元素添加display: flex属性，开启Flex布局，其子元素默认会沿水平方向排列，且默认align-items: stretch会让所有子元素自动与最高的子元素等高，刚好匹配你的需求。
2. 移除三个栏的float属性，以及侧边栏的height: 100%声明，无需额外设置高度，Flex会自动处理等高。
3. 可选优化：如果需要内容较少时，整个页面也撑满视口高度，可以给body设置min-height: 100vh，配合Flex布局让main自动填充剩余视口空间。

你也可以选择Grid布局实现同等效果，只需给main设置display: grid; grid-template-columns: 15% 70% 15%;，同样会默认实现子元素等高，适配需求。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        html
        {
            color: PURPLE;
            height: 100%;
            background-color:purple;
        }
        body
        {
            color: #FF9933;
            min-height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
            background-color:pink;
        }
        header
        {
            text-align: center;
            background-color:yellow;
        }
        main
        {
            margin-top: 0px;
            flex: 1;
            display: flex;
            background-color:grey;
        }
        footer{
            text-align: center;
            background-color:yellow;
        }
        .leftside {
            background:red;
            width:15%;
        }
        .midside{
            background-color:green;
            width:70%;
            text-align:center;
        }
        .rightside{
            background:blue;
            width:15%;
            display: flex;
            flex-direction: column;
        }
    </style>
</head>
<body>
    <header>
        HEADER
    </header>
    <main>
        <div class="leftside">
            LEFT
        </div>
        <div class="midside">
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
        </div>
        <div class="rightside">
            RIGHT
        </div>
    </main>
    <footer>
        FOOTER
    </footer>
</body>
</html>

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