Html 如何使浮动延伸宽度？

我在一个页面上有两个元素。一个是主内容容器，另一个是侧栏。我所要做的就是让边栏始终与极右翼对齐——这意味着在屏幕右侧，无论屏幕分辨率和内容容器多少都应该在页面中间。

我有一个主容器，可以装这两个东西

我尝试的第一件事是在侧边栏上使用

绝对定位

，但这不起作用，因为当分辨率改变时，侧边栏会与内容重叠

为了方便起见，内容框是

632px

&侧栏是

272px

因此，我接下来尝试的是将这些元素的

浮动到右边&使用
左边的
边距
10%的“百分比”
。这显然阻止了重叠；但是现在，当分辨率变小到不能包含content元素时，content元素的边距和边栏现在会下降到边栏内容的下方

因此，我想知道是否有任何方法可以使屏幕变得更大，并使用水平滚动条，而不是将内容放在侧边栏下方？
为了实现我对您的问题的解决方案，您需要稍微修改一下HTML：

<div id="container">
    <div id="main">
    ...
    </div>
</div>
<div id="sidebar">
   ...
</div>

我创建的目的是向您展示我发布的内容（请注意，我修改了这些值，使其适合微小的预览屏幕）。
为了实现我对您的问题的解决方案，您需要稍微修改您的HTML：

<div id="container">
    <div id="main">
    ...
    </div>
</div>
<div id="sidebar">
   ...
</div>

我创建的目的是向您展示我发布的内容（请注意，我修改了这些值，使其适合小预览屏幕）。
您的问题有点模棱两可；但我认为最简单的解决方案是将主要内容和边栏都包装在包装器中，并给包装器一个固定的宽度。将主要内容向左浮动，侧边栏向右浮动，然后！请注意，这将在几乎任何屏幕大小上显示相同的内容，并且不会根据需要调整大小，但有助于调整问题的大小

或者，您也可以这样做，这样可以很好地调整窗口的大小，但不能很好地控制尺寸。
为了充分利用这两个方面，您要么需要JavaScript，要么如上所述，需要媒体查询，这样您就可以根据浏览器窗口大小动态调整/重新布局元素

另一种解决方法是使用
你的问题有点模棱两可；但我认为最简单的解决方案是将主要内容和边栏都包装在包装器中，并给包装器一个固定的宽度。将主要内容向左浮动，侧边栏向右浮动，然后！请注意，这将在几乎任何屏幕大小上显示相同的内容，并且不会根据需要调整大小，但有助于调整问题的大小

或者，您也可以这样做，这样可以很好地调整窗口的大小，但不能很好地控制尺寸。
为了充分利用这两个方面，您要么需要JavaScript，要么如上所述，需要媒体查询，这样您就可以根据浏览器窗口大小动态调整/重新布局元素

另一个解决方案是使用
如果我理解正确，应该这样做：

CSS:

<div id="containerOuter">
    <div id="containerInner">
        <div id="hiddenSidebar"></div>
        <div id="contentOuter">
            <div id="contentInner">Content</div>
        </div>
        <div id="sidebar">Right Sidebar</div>
    </div>
</div>

/*伪CSS重置*/
*{填充：0；边距：0；}
#集装箱机{
位置：绝对位置；
宽度：100%；
身高：100%；
}
#集装箱工人{
显示：表格；
宽度：100%；
身高：100%；
}
#希德巴尔{
显示：表格单元格；
宽度：272px；
}
#contentOuter{
显示：表格单元格；
背景色：#999999；
最小宽度：632px；
身高：100%；
}
#内容内部{
左边距：自动；
右边距：自动；
背景色：#888888；
宽度：632px；
身高：100%；
}
#边栏{
显示：表格单元格；
宽度：272px；
最小宽度：272px；
背景色：#777777；
}

HTML:

<div id="containerOuter">
    <div id="containerInner">
        <div id="hiddenSidebar"></div>
        <div id="contentOuter">
            <div id="contentInner">Content</div>
        </div>
        <div id="sidebar">Right Sidebar</div>
    </div>
</div>


内容
右侧边栏
如果我理解正确，应该这样做：

CSS:

<div id="containerOuter">
    <div id="containerInner">
        <div id="hiddenSidebar"></div>
        <div id="contentOuter">
            <div id="contentInner">Content</div>
        </div>
        <div id="sidebar">Right Sidebar</div>
    </div>
</div>

/*伪CSS重置*/
*{填充：0；边距：0；}
#集装箱机{
位置：绝对位置；
宽度：100%；
身高：100%；
}
#集装箱工人{
显示：表格；
宽度：100%；
身高：100%；
}
#希德巴尔{
显示：表格单元格；
宽度：272px；
}
#contentOuter{
显示：表格单元格；
背景色：#999999；
最小宽度：632px；
身高：100%；
}
#内容内部{
左边距：自动；
右边距：自动；
背景色：#888888；
宽度：632px；
身高：100%；
}
#边栏{
显示：表格单元格；
宽度：272px；
最小宽度：272px；
背景色：#777777；
}

HTML:

<div id="containerOuter">
    <div id="containerInner">
        <div id="hiddenSidebar"></div>
        <div id="contentOuter">
            <div id="contentInner">Content</div>
        </div>
        <div id="sidebar">Right Sidebar</div>
    </div>
</div>


内容
右侧边栏
我不确定我是否理解您的意图。但是，如果您想使用一个设置大小的元素作为滚动条，则始终可以使用overflow:scroll。您可能也应该将content和sidbar放在一个主包含div中。我确实在一个包含div中包含了这两个元素。尝试了您建议的方法，但没有成功。左填充：227px；当使用absolutes作为解决方案时，内容容器将解决重叠问题。@Wayne。。。。。我刚刚回复了你的答案，但它被删除了？我尝试了你的解决方案，但它没有帮助重叠，甚至在不需要的时候也创建了水平滚动条。。。。必须禁用
内容
元素上的
宽度
，才能删除它们。我删除了它，因为它被否决了。今天这里的人都很刻薄-我要离开一会儿…*{padding:0px；margin:0px；}修复额外的宽度。许多wordpress主题都使用了填充技巧，以允许侧边栏不与内容重叠，而是与填充重叠。我不确定我是否理解您的意图。但是，如果希望使用设置大小的元素，则始终可以使用overflow:scroll