html - CSS - 对齐侧边栏旁边的内容区域而不添加额外的边距和javascript

Question

有一个虚拟示例说明我的侧边栏和内容区域是如何对齐的:

http://jsfiddle.net/rWj95/11/

如您所见，我将 #sidebar 包含的宽度添加到内容区域，因此侧边栏不会与内容区域重叠。它与内容重叠，因为 #sidebar 设置了 position: fixed; 属性。

今天，我想添加一个可以调整侧边栏大小的按钮，这成了一个问题，因为每次调整侧边栏大小时我都必须更改内容区域的边距量。

是否有自动将侧边栏与内容区域对齐的方法？

Answer 1

一种可能性是将内容包装在另一个 div 中。您将侧边栏固定在左侧，然后在其余正文内容周围放置一个容器/包装器 div，然后写 left:200px;只有一次……

但是，使用百分比也总是一个好主意。使用百分比可以更好地监控页面的结构，然后可以通过给它一个最大、最小或设置宽度来限制它的尺寸。您使用 100% 的内部元素将填充其容器宽度的 100%。

希望这就是你的意思!

JSFiddle:http://jsfiddle.net/8C7U7/

在内容 id 中添加一些这样的容器:

        <article id="stuff">
            <p>buhreg</p>
        </article>

风格:

#stuff{
    width:100%;
    height:60px;
    background:blue;
}

附言。尝试调整预览窗口的大小!