如何使用和不使用侧边栏保持响应式设计？

Question

我决定在我网站的所有页面的左侧添加一个侧边栏。侧边栏可以隐藏或可见，我不希望它与现有页面重叠。

如果我有这样的侧边栏，页面的内容往往会溢出容器。我需要根据容器宽度而不是浏览器宽度来更改内容。

我不想为内容创建容器，并将overflow-y设置为auto并使其延伸到浏览器高度，因为我需要为所有页面执行此操作...

我已经尝试更改正文上的左边距并添加一个以position: fixed作为侧边栏的div。

我如何根据容器宽度而不是浏览器宽度更改内容？

Answer 1

尝试以下方法：

#content {
width: 80%; /* Adjust as need */
position: relative;
}

#content .children {
max-width: 100%; /* Or less, to keep the children from overflowing */
}

注意：我使用了虚构的ID和类