CSS怎样固定侧边栏动态宽度？calc()视口单位计算

.sidebar {
    width: calc(20vw + 0px); /* 基础宽度是视口宽度的20% */
    min-width: 180px; /* 但不能小于180px */
    /* 配合flexbox或grid布局，让主内容自动填充剩余空间 */
}

/* 或者，更直接地，如果侧边栏是固定像素，而主内容是动态的 */
.main-content {
    width: calc(100vw - 250px); /* 假设侧边栏固定250px宽 */
    /* 这种方式需要注意水平滚动条问题，通常会结合flex或grid */
}

.container {
    display: flex; /* 或者 display: grid; */
    width: 100vw; /* 容器占据整个视口宽度 */
}

.sidebar {
    /* 侧边栏宽度：可以是视口宽度的某个百分比，加上或减去固定值 */
    width: calc(25vw - 20px); /* 比如，视口宽度的25%减去20px的内边距或间距 */
    min-width: 150px; /* 确保在小屏幕下不会太窄 */
    max-width: 300px; /* 确保在大屏幕下不会太宽 */
    background-color: #f0f0f0;
    padding: 10px;
}

.main-content {
    flex-grow: 1; /* 在Flexbox中，主内容自动填充剩余空间 */
    /* 或者在Grid中，使用fr单位 */
    background-color: #fff;
    padding: 20px;
}

.responsive-sidebar {
    width: calc(20vw + 50px); /* 基础宽度是视口宽度的20%，再加上50px作为最小基准或补偿 */
    min-width: 180px; /* 确保它在非常小的屏幕上至少有180px宽 */
    max-width: 320px; /* 避免在大屏幕上变得过宽，影响主内容阅读 */
    background-color: #e8f5e9;
    padding: 15px;
    box-sizing: border-box; /* 确保padding不会撑大元素 */
}

+ 50px

min-width

max-width

calc(100% - 20px)

calc(100%-20px)

+

-

*

/

calc(100% - calc(50px + 10px))

box-sizing

width: calc(...)

content-box

box-sizing: border-box;

.wrapper {
    display: flex;
    /* 让主内容和侧边栏在垂直方向上都填满父容器 */
    align-items: stretch; 
}

.sidebar {
    /* 侧边栏可以使用calc()来定义一个弹性宽度 */
    width: calc(20vw + 30px);
    min-width: 180px;
    max-width: 300px;
    flex-shrink: 0; /* 确保侧边栏不会在空间不足时被压缩 */
    /* 或者，如果你希望它能稍微收缩，可以设置一个较小的flex-shrink值 */
}

.main-content {
    flex-grow: 1; /* 主内容区域会“生长”以占据所有剩余空间 */
    flex-basis: 0; /* 配合flex-grow，确保它从0开始生长 */
}

flex-grow: 1

.grid-container {
    display: grid;
    /* 定义两列：第一列是侧边栏，第二列是主内容 */
    grid-template-columns: minmax(180px, 25vw) 1fr; 
    /* 或者更简单，如果侧边栏宽度是固定的，或者用calc()定义 */
    /* grid-template-columns: calc(20vw + 50px) 1fr; */
    /* 1fr 表示占据所有剩余空间 */
    gap: 20px; /* 列之间的间距 */
}

.sidebar-grid {
    /* 在Grid布局中，侧边栏的宽度由grid-template-columns定义，这里通常不需要再设置width */
    background-color: #e3f2fd;
    padding: 15px;
}

.main-content-grid {
    background-color: #ffffff;
    padding: 20px;
}

grid-template-columns: minmax(180px, 25vw) 1fr;

minmax(180px, 25vw)

1fr