在响应式布局中使用固定定位时Div重叠。

Question

我正在创建一个响应式布局的网站。

我有两列：补充工具栏和内容。

侧边栏宽度为20％，位置固定，而内容宽度为80％，静态位置。

当屏幕尺寸缩小时，如何阻止内容隐藏在补充工具栏下？

Answer 1

overflow:hidden

尝试添加

Answer 2

您可以使用媒体查询执行此操作

@media (max-width: 800px) {
  #sidebar {
    display: none;
  }
}

Answer 3

当您制作fixed内容时，它会从文档流程中删除。因此，无论两列宽度是否设置为20%和80%，内容都应隐藏在侧边栏下方。

您可以在此处看到：http://jsbin.com/OQOSEZoF/3/edit（“80％”字样未显示）。

因此，您可能需要在内容padding-left: 20%上设置<div>。这可能会解决你自己的问题。

但是，如果页面上有其他内容，例如与固定div重叠的页脚，则可以使用媒体查询根据屏幕大小更改样式。

@media only screen and (max-width : 500px) {
  #sidebar {
    position: static;
  }
  #content {
    padding-left: 0; 
  }
}

请参阅此处的演示：http://jsbin.com/OQOSEZoF/6/edit

当您将结果的大小调整为小于500像素时，页脚中的文本将变为可见，因为侧栏会切换为静态。