Question

我正在寻找针对以下问题的HTML / CSS解决方案。

我目前在网页左侧有一个侧边栏类型元素。在右侧，我想放置几个信息面板。我希望这些信息面板根据窗口的大小自行调整大小，同时保留在侧边栏的右侧。我想为所有这些面板设置单独的背景，以给每个面板一个独特的感觉（想想PowerPoint，但更好）。

为了完成所有这些，我在网站上设置了一个固定div作为侧边栏，其宽度必须为92px。我在这个固定div的右边也有几个div。我需要让右侧的“面板”div根据视口宽度自行调整大小，所以目前我的宽度是屏幕的100％。为了确保背景图像适合“面板”div，无论它们的大小如何，我都使用background-size:contain;行。

一切都很完美，除了一件事：“面板”div位于固定div下方，这些div的背景图像被切断。我已经制作了一个JSFiddle来强调这一点：http://jsfiddle.net/32yZL/

你会注意到三行文字“这是一个测试。这是一个测试。这是一个测试。”被切断在左边。通过向div添加92px的填充可以很容易地解决这个问题，但是我还没有找到类似于“panel”div的背景图像的解决方案。

有什么建议吗？

编辑：谢谢大家的回复。我已经尝试了所有这些，但没有一个工作，我相信这是我的错。我不知道JSFiddle可以导入外部文件（是的，我知道，我是盲目的）我创建了一个新的，我希望更好地强调问题：

http://jsfiddle.net/ChrisBush/womLk4c9/

您会注意到div的背景图片仍然在侧边栏后面，但文字很好。我希望背景图像与侧边栏齐平。有什么建议吗？

编辑2：在完成这个项目的更多工作后，我开始意识到这个问题有几个解决方案。不幸的是，我正在使用一些免费的js，我从网站上提取这些网站以在网站上创建视觉效果，这使得事情变得非常复杂，超出了这篇文章的范围，并使大多数答案无关紧要。我想我会尝试重写一些js，为此我将在其他地方再发一篇文章。再次感谢您的所有建议！

Answer 1

http://jsfiddle.net/32yZL/4/

我将右侧幻灯片包裹在<div id="slide_wrap">中，我给了margin-left: 92px;。

这将阻止他们进入固定边栏。

编辑：为了响应您的代码编辑，此问题并非在侧边栏下，而是背景定位固定。如果您从后台声明中删除了fixed，则会修复它。

Answer 2

你不需要在slide01上使用宽度：100％，只需在slide01上使用margin-left：92px并删除宽度并完成http://jsfiddle.net/32yZL/6/，div元素尝试使用全部默认情况下它可以使用的水平空间，如果你需要设置边距和填充，通常将它设置为100％通常比解决方案带来更多问题

#slide01{
    background:red no-repeat fixed;
    background-size:contain;
    margin-left: 92px;
    height:250px;
}

Answer 3

您可以先将面板div向右浮动，然后使用calc方法获取宽度

width: calc(100% - 92px);

并从100％宽度中减去侧边栏的宽度。

这是更新的JSFIDDLE

希望这就是你要找的东西。

修复了位于辅助div背景图像前面的HTML中的位置div

3 个答案: