HTML 代码实现可拖动伸缩的左侧目录栏

以下是实现可拖动伸缩的左侧目录栏的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            display: flex;
            margin: 0;
        }
        #sidebar {
            width: 25%;
            background-color: #f1f1f1;
            overflow-y: auto;
            resize: horizontal;
            min-width: 200px;
        }
        #content {
            flex: 1;
            background-color: #ffffff;
        }
        #sidebar h2 {
            text-align: center;
            color: gray;
        }
    </style>
</head>
<body>
    <div id='sidebar'>
        <h2>目录</h2>
        <ul>
            <li>章节1</li>
            <li>章节2</li>
            <li>章节3</li>
        </ul>
    </div>
    <div id='content'>
        <!-- 此处为主内容部分 -->
    </div>
</body>
</html>

以上代码创建了一个左侧固定宽度为页面宽度的 1/4 的目录栏。目录栏的高度会自动占满屏幕，并可以手动拖动调整宽度。目录栏中的标题'目录'会相对居中显示，章节列表会以灰色显示。右侧的内容区域会自动填充剩余的空白部分，并且背景色为白色。