0

我有一个前端 Web 开发专家的问题困扰着我。

在我的页面上，我有一个固定在页面右侧的侧边栏，然后是一大块内容（固定宽度），它占据了超过浏览器窗口的宽度。问题是，div 最右侧的内容无法看到，因为它位于固定侧边栏的后面。

这是我在 jsFiddle 中的问题的一个超级精简示例。

编辑： 这是我的问题的更完整示例。

我认为只需将 padding-right: "width of sidebar"px 应用于正文或包装 div，或将 margin-right: "width of sidebar"px 应用于内容 div 应该可以解决问题，但两者都不起作用。我不想诉诸于放置一个填充 div 除非没有办法用 CSS 来实现这种效果。

我在谷歌上搜索了这个问题，但我发现的只是关于如何从右侧删除空格的问题，这与我想要做的相反。

感谢任何可以解决这个问题的人！

编辑：在看到关于为什么我不能简单地以不同方式进行设置的多个问题之后，我想我会通过展示一个更深入的例子来说明我正在努力完成的事情。你可以在这里看到。表格中的列必须是固定宽度的，我希望能够看到最后一列的全部内容。希望这有助于澄清事情！

4

4 回答 4

1

我知道你已经想出了一个 jquery 解决方案，但我认为你可以通过一个简单的 css 规则来解决：

tr td:last-child { padding-right: 100px; }

td它只是在 each中的最后一个上设置填充tr，等于固定的右侧边栏宽度。

于 2012-07-09T18:53:06.013 回答
0

我知道您想要固定宽度，但我相信这可以满足您的需求，而无需担心用户屏幕分辨率。我刚刚添加了 float:right 和 width:100%; 到内容 div，它对我来说看起来不错。试试这个代码：

#content {
border: 1px solid #444;
background: #aaa;
height: 400px;
width: 100%;
float:right;
}
于 2012-07-09T14:52:48.627 回答
0

我使用左 0 和右 110px 将包装器位置设为绝对位置，您也可以将其放在内容 div 上而不是包装器上。只是给你一个提示......见http://jsfiddle.net/aHKU5/98/

#wrapper {
    position: absolute;
    left: 0px; right:110px;
    border: 1px solid red;
}

编辑 我还创建了一个具有最大宽度的版本，以确保内容永远不会超过 900 像素，但如果空间较小，它也会尊重侧边栏...... http://jsfiddle.net/aHKU5/102/

#wrapper {
    position: absolute;
    left: 0px;
    max-width: 900px;
    margin-right: 110px;
    border: 1px solid red;
}
于 2012-07-09T14:33:53.890 回答
0

所以我想出了一个解决我的问题的方法。我只是简单地使用 jQuery 将 body 的宽度设置为表格的宽度加上右侧边栏的宽度。像魅力一样工作。

如果未来的开发人员偶然发现这个页面有同样的问题，这是我使用的代码：

$('body').css('width', $('table').width() + 150 + 'px');

其中 150 是侧边栏的宽度。

于 2012-07-09T15:57:32.300 回答