html - 如何阻止固定仓位变为负数

Question

我正在更新一个采用响应式设计的网站，该网站的所有内容都位于以视口(viewport)为中心的 1000 像素宽度的容器中。我想使用一个固定的侧边栏，但希望整个内容仍然坚持 1000 像素并在视口(viewport)中居中，当视口(viewport)小于 1000 像素时， Bootstrap 响应式设计才能工作。我目前的最佳尝试如下:

<div id="wrapper">
  <div id="page-content-wrapper"></div>
  <div id="sidebar-wrapper"></div>
</div>

使用 CSS

#wrapper{
    height: 100%;
    position: fixed;
    left: calc((100vw - 1000px)/2);
    top: 0;
    max-width: 1000px;
    width: 100%;
    overflow: auto;
}
#page-content-wrapper{
    position: relative;
    overflow-y: scroll;
    height: 100%;
    padding: 0px;
}
#sidebar-wrapper {
    position: absolute;
    top: 0px;
    left: 250px;
}

这在视口(viewport)小于 1000 像素之前一直有效，此时 bootstrap 可以正常工作，例如菜单折叠，但内容开始向左消失。这是因为对于小于 1000 像素的视口(viewport)，包装器左侧位置变为负值。

当视口(viewport)小于 1000 像素时，如何阻止内容消失？

Answer 1

创建媒体查询，或使用预定义的 Bootstrap 媒体查询

@media (max-width: 999px) {
  #wrapper{
    left: calc((100vw - 800px)/2);
  }
}

@media (max-width: 799px) {
  #wrapper{
    left: calc((100vw - 400px)/2);
  }
}

@media (max-width: 399px) {
  #wrapper{
    left: calc((100vw - 200px)/2);
  }
}