强制空格出现在固定宽度div和页面右侧之间

Question

我对那里的前端网络开发专家提出了一个问题。

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

Here is a super stripped down example of my issue in jsFiddle.

编辑： Here is a more complete example of my issue.

我认为只是简单地应用padding-right：＆＃34;侧边栏的宽度＆＃34; px到主体或包装div，或者应用margin-right：＆＃34;侧边栏的宽度＆＃34; px内容div应该解决问题，但都不起作用。除非用CSS无法实现这种效果，否则我不想使用填充div。

我在google上搜索了这个问题，但是我发现的所有问题都是关于如何从右侧删除空白的问题，这与我想做的事情相反。< / p>

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

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

Answer 1

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

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

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

Answer 2

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

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

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

#wrapper {
    position: absolute;
    left: 0px;
    max-width: 900px;
    margin-right: 110px;
    border: 1px solid red;
}

Answer 3

我知道你想要固定的宽度，但这可以达到我想要的方式而不用担心用户的屏幕分辨率。我刚刚添加了float：right和width：100％;到内容div，它对我来说很好看。试试这段代码：

#content {
border: 1px solid #444;
background: #aaa;
height: 400px;
width: 100%;
float:right;
}

Answer 4

所以我找到了解决问题的方法。我只是使用jQuery将body的宽度设置为表的宽度加上右侧边栏的宽度。工作就像一个魅力。

以下是我使用的代码，如果未来的开发人员在这个页面上遇到同样的问题：

$（'body'）。css（'width'，$（'table'）。width（）+ 150 +'px'）;

其中150是侧边栏的宽度。