Question

我正在使用响应式设计更新网站，该网站将所有内容放在以视口为中心的1000像素宽容器中。我想使用固定的侧边栏，但希望整个内容仍然坚持1000px并在视口中居中，并且当视口小于1000px时，使引导响应式设计起作用。我目前的最佳尝试如下：

#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;
}

用css

Get-Help Get-ChildItem

这可以正常工作，直到视口小于1000px，此时bootstrap工作，例如菜单崩溃，但内容开始消失在左边。这是因为对于小于1000px的视口，包装器左侧位置变为负值。

当视口小于1000像素时，如何停止内容消失？

Answer 1

创建媒体，或使用预先设定的引导媒体查询

@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);
  }
}

Answer 2

SilentTremor的答案是解决此类问题的好方法。我用于我的情况的确切代码是

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

如何阻止固定定位变为负面

2 个答案: