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

Question

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

我有两列：侧边栏和内容。

侧边栏的宽度为 20%，位置固定，而内容的宽度为 80%，位置固定。

当屏幕尺寸减小时，如何阻止内容隐藏在侧边栏下？

score 0 · Accepted Answer

你可以用媒体查询来做到这一点

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

score 0 · Accepted Answer

0

overflow:hidden

尝试添加

于 2013-11-15T04:16:39.893 回答

score 0 · Accepted Answer

当您制作某些东西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 像素时，由于侧边栏切换到静态，页脚中的文本变得可见。

3 回答 3