为什么我的主要内容区域不会停在屏幕边缘？答案

【问题标题】：Why does my main content area not stop at the edge of the screen?为什么我的主要内容区域不会停在屏幕边缘？
【发布时间】：2011-08-02 07:16:41
【问题描述】：

在我的网站中，我试图布局我试图让我的页面有一个左侧边栏/菜单区域，右侧是主要内容区域。我希望我的主要内容区域停在屏幕的右边缘，因此我尝试为该区域指定一个width: 100%，但这似乎无法正常工作。它似乎是 100% 的宽度，但随后向右移动（因此离开了屏幕的一侧。

我怎样才能做到这一点以保留页面中的所有文本？

【问题讨论】：

标签： css html

【解决方案1】：

对于您的main-area，删除width:100% 和position:absolute，将left:160px 替换为margin-left:160px，就完成了。

【讨论】：

【解决方案2】：

这是因为 #main-area 设置为 100% 宽度，这将是容器的 100%（在这种情况下是 body。所以，它将是页面宽度的 100%。但是因为你是将它向左移动 160px，它的实际位置是 body 的 100% + 160px。

布局需要流畅吗？如果没有，您可以设置#main-area 的宽度（以像素为单位）。

【讨论】：

如果你重新加载页面，我将它全部包裹在一个 100% 宽度的 page div 中，但 #main-area（在 #page 内部）仍然在屏幕之外
Alochci 明白了——你的page div 仍然是 body 宽度的 100%，所以你绝对定位的 div 仍然是那个 div 的 100%，也就是它的容器的 100% (@987654327 @)。

【解决方案3】：

您可以尝试将width: 100% 替换为right: 0px of main-area。

基本上这告诉盒子的右侧应该是父级左侧的0px。现在main-area 仍然可以随页面宽度缩放。

【讨论】：