body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}

.wrapper {
    display: flex;
    height: 100%;
}

.sidebar {
    width: 250px; /* 你可以根据需要调整宽度 */
    background-color: #f4f4f4;
    border-right: 1px solid #ddd;
    padding: 20px;
    box-sizing: border-box;
    position: fixed; /* 固定位置 */
    top: 0; /* 从顶部开始 */
    bottom: 0; /* 到底部结束 */
    overflow-y: auto; /* 如果内容过多，允许垂直滚动 */
}

.sidebar h2 {
    margin-top: 0;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li {
    margin-bottom: 15px;
}

.sidebar ul li a {
    text-decoration: none;
    color: #333;
}

.sidebar ul li a:hover {
    text-decoration: underline;
}

.content {
    margin-left: 270px; /* 确保内容与侧边栏不重叠，这里设置了比侧边栏宽度稍大的值 */
    padding: 20px;
    box-sizing: border-box;
    max-width: calc(100% - 270px); /* 确保内容区域不会超出视口宽度 */
}

/* 确保当页面滚动时，内容不会被侧边栏遮挡 */
.content::before {
    content: "";
    display: block;
    height: 60px; /* 这个值应该与你的侧边栏顶部到视口顶部的距离相匹配（包括可能的标题高度和填充） */
    margin-negative: -60px; /* 向上移动内容，以补偿上面的高度 */
    visibility: hidden; /* 隐藏这个块，但它仍然会占据空间 */
}

/* 可选的：为页面添加一些基本的样式 */
h1 {
    color: #333;
}

p {
    color: #666;
}