求助：如何实现底部拉伸的固定+自适应双栏布局

我完全懂你想要实现的效果——顶部固定header，下方双栏布局，一栏固定宽度、另一栏自适应剩余空间，而且两栏都要稳稳撑到页面底部，同时栏内加内容时不会溢出。你之前用float和固定高度的方式确实没法搞定这个需求，下面给你两种基于现代CSS的可行方案，都能完美满足你的要求：

方案1：Flexbox 布局（兼容性好，推荐） #

这种方案用Flexbox的弹性特性来分配空间，轻松实现撑满页面高度的效果：

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            padding: 0;
            margin: 0;
            height: 100%;
            /* 让body成为弹性容器，垂直排列子元素 */
            display: flex;
            flex-direction: column;
        }
        .hb {
            background-color: #3a3a3a;
            padding: 1rem;
        }
        .hb-header {
            font-family: 'Roboto Slab', serif;
            color: #fff;
            margin: 0;
        }
        .chat-content {
            /* 让这个容器撑满header剩下的所有空间 */
            flex: 1;
            display: flex;
            /* 防止子元素溢出容器 */
            overflow: hidden;
        }
        .server-list {
            background-color: #b2b2b2;
            color: #fff;
            /* 固定宽度 */
            width: 300px;
            /* 内容过多时自动出现滚动条 */
            overflow-y: auto;
            padding: 1rem;
        }
        .server-chat {
            background-color: #999;
            color: #fff;
            /* 自适应剩余宽度 */
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
        }
        /* 你的其他样式保留 */
        .roboto-slab { font-family: 'Roboto Slab', serif; }
        .navbutton { 
            color: #fff; 
            text-decoration: none; 
            display: inline-block; 
            text-align: center; 
            padding: 2px; 
            float: left; 
        }
        .navbutton:link, .navbutton:visited { background-color: #00bc00; }
        .navbutton:active { background-color: #007200; }
    </style>
</head>
<body>
    <div class="hb"> 
        <h2 class="hb-header">Header</h2> 
    </div>
    <div class="chat-content"> 
        <div class="server-list" id="serverlist"> 
            <h1>Display Text</h1>
            <!-- 可以加更多测试内容看滚动效果 -->
            <p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p>
            <p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p>
        </div> 
        <div class="server-chat" id="serverchat"> 
            <h1>Display Text</h1>
            <!-- 可以加更多测试内容看滚动效果 -->
            <p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p>
            <p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p>
        </div> 
    </div>
</body>
</html>

关键要点： #

• body 设置为 display: flex; flex-direction: column;，让header和内容区垂直排列
• .chat-content 设置 flex: 1，自动填充header下方的剩余空间，确保撑到页面底部
• 双栏内部用Flexbox，.server-list 固定宽度，.server-chat 设置 flex:1 自适应剩余宽度
• 给两个栏都加 overflow-y: auto，内容过多时自动出现滚动条，不会溢出容器

方案2：CSS Grid 布局（更简洁的现代方案） #

如果你更倾向于Grid布局，这种写法更直观：

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            padding: 0;
            margin: 0;
            height: 100%;
            /* 把body设为网格容器，两行：header自动高度，内容区占剩余空间 */
            display: grid;
            grid-template-rows: auto 1fr;
        }
        .hb {
            background-color: #3a3a3a;
            padding: 1rem;
        }
        .hb-header {
            font-family: 'Roboto Slab', serif;
            color: #fff;
            margin: 0;
        }
        .chat-content {
            /* 内容区设为网格容器，两列：固定300px，另一列自适应 */
            display: grid;
            grid-template-columns: 300px 1fr;
            overflow: hidden;
        }
        .server-list {
            background-color: #b2b2b2;
            color: #fff;
            overflow-y: auto;
            padding: 1rem;
        }
        .server-chat {
            background-color: #999;
            color: #fff;
            overflow-y: auto;
            padding: 1rem;
        }
        /* 你的其他样式保留 */
        .roboto-slab { font-family: 'Roboto Slab', serif; }
        .navbutton { 
            color: #fff; 
            text-decoration: none; 
            display: inline-block; 
            text-align: center; 
            padding: 2px; 
            float: left; 
        }
        .navbutton:link, .navbutton:visited { background-color: #00bc00; }
        .navbutton:active { background-color: #007200; }
    </style>
</head>
<body>
    <div class="hb"> 
        <h2 class="hb-header">Header</h2> 
    </div>
    <div class="chat-content"> 
        <div class="server-list" id="serverlist"> 
            <h1>Display Text</h1>
        </div> 
        <div class="server-chat" id="serverchat"> 
            <h1>Display Text</h1>
        </div> 
    </div>
</body>
</html>

关键要点： #

• body 的 grid-template-rows: auto 1fr 直接定义了header和内容区的高度分配
• .chat-content 的 grid-template-columns: 300px 1fr 直接实现固定栏+自适应栏的布局
• 同样通过 overflow-y: auto 处理内容溢出问题

这两种方案都能完美满足你的三个需求：双栏布局（固定+自适应）、背景色独立且撑满页面底部、内容不溢出。你可以根据自己的习惯选择其中一种，测试后就能看到效果啦！

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