无需JavaScript实现可调整两栏布局（替代Frameset）

这里用纯CSS实现替代传统Frameset的可调整双面板布局，同时支持根据窗口宽高比自动切换行列布局，完全不需要JavaScript：

HTML 结构 #

<!DOCTYPE html>
<html>
<head>
    <title>CSS Resizable Panels</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="panel panel-left">
            <!-- 左侧面板内嵌内容 -->
            <h3>左侧导航</h3>
            <ul>
                <li>菜单选项1</li>
                <li>菜单选项2</li>
                <li>菜单选项3</li>
            </ul>
        </div>
        <div class="panel panel-right">
            <!-- 右侧面板内嵌内容 -->
            <h3>主内容区</h3>
            <p>这里是主要内容展示区域，内容过长时会自动出现滚动条。</p>
            <p>可以拖动左侧面板的边缘调整宽度，当窗口变成竖屏（高≥宽）时，布局会自动切换为上下排列，此时可以拖动上方面板边缘调整高度。</p>
        </div>
    </div>

    <!-- 替代noframes的提示 -->
    <div class="unsupported-prompt">
        你的浏览器不支持该布局所需的CSS特性，请升级浏览器。
    </div>
</body>
</html>

CSS 样式 #

/* 基础重置 */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* 容器布局：默认左右列布局 */
.container {
    display: grid;
    grid-template-columns: minmax(150px, 20%) 1fr;
    height: 100%;
}

/* 通用面板样式 */
.panel {
    overflow: auto;
    padding: 1rem;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* 左侧面板：可横向拖动调整 */
.panel-left {
    resize: horizontal;
    background-color: #f5f5f5;
}

/* 右侧面板 */
.panel-right {
    background-color: #fff;
}

/* 媒体查询：窗口高宽比≤1时切换为上下行布局 */
@media (max-aspect-ratio: 1/1) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(120px, 20%) 1fr;
    }

    .panel-left {
        resize: vertical;
    }
}

/* 不支持特性时显示提示 */
@supports not (display: grid) or not (resize: horizontal) {
    .container {
        display: none;
    }
    .unsupported-prompt {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-size: 1.2rem;
        color: #dc3545;
    }
}

关键特性说明 #

• 用常规div元素替代frameset和frame，所有内容直接内嵌在当前页面中
• CSS Grid实现灵活的行列布局，minmax()函数确保面板有最小尺寸限制，同时支持剩余空间自适应
• resize属性实现用户可拖动调整面板大小，配合overflow: auto保证内容溢出时出现滚动条
• 通过max-aspect-ratio: 1/1媒体查询，当窗口高度大于等于宽度时，自动切换为上下排列的行布局
• 利用@supports检测浏览器兼容性，不支持时显示替代提示，对应原Frameset的noframes功能

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