CSS布局问题-在包装器上放置侧边栏

Question

这让我发疯，但是我试图在页面包装上放置侧边栏。 绝对定位的问题是，边栏需要与页眉的角（蓝色）对齐。 我考虑过将JS保持在当前位置，并计算高度，但是我不确定这是否是最有效的方法。 我乐于接受想法，这是JSFiddle的链接（您必须缩小），以下代码：

<style type="text/css">
    *       {margin: 0 auto; text-align: center; font-size: 42px; color: #fff; font-weight: bold;}
    .global {width: 1200px; margin: 0 auto;}

    #slider {height: 354px; width: 100%; max-width: 1400px; min-width: 1200px; height: 100%; min-height: 354px; background-color: red;}
    #container      {position: relative; background-color: beige;}

    #headerWrapper  {height: 200px; background-color: aqua;}
    #header         {height: 200px; background-color: blue;}

    #contentWrapper {height: 300px; background-color: black;}
    #content        {height: 300px; background-color: pink;}

    #listingWrapper {height: 500px; background-color: green;}
    #listings       {height: 500px; background-color: orange;}

    #footerWrapper  {height: 200px; background-color: cyan;}
    #footer         {height: 200px; background-color: grey;}

    #sidebar        {background-color: yellow; width: 240px; height: 170%; position: absolute; left: 2.5%; top: 0;}
</style>

<div id="headerWrapper">
    <div id="header" class="global">
        Header
    </div>
</div>

<div id="container">
    <div id="sidebar">

    </div>

    <div id="slider">
        Slider
    </div>

    <div id="contentWrapper">
        <div id="content" class="global">
            Top Content
        </div>
    </div>

    <div id="listingWrapper">
        <div id="listings" class="global">
            Bot Content
        </div>
    </div>
</div>

<div id="footerWrapper">
    <div id="footer" class="global">
        Footer
    </div>
</div>

从理论上讲，侧栏将从深蓝色标题的左上角开始，在滑块上方，并在页脚处停止。 它不应该离开全局width: 1200px; 。 绝对位置会给水带来混乱，如果我添加一个具有静态宽度的相对容器，则会失去其他容器的背景色。

Answer 1

这是我找到的解决方案，但我将其保持打开状态以查看是否有人有想法。 我正在做的是获取标头的偏移量，然后根据标头的偏移量将边栏向左移动。 每当文档加载或用户调整屏幕大小时，我都会这样做。

$(document).ready(function(){
    var offset = $('#header').offset();
    $('#sidebar').css('left', offset.left+'px');
});

$(window).resize(function(){
    var offset = $('#header').offset();
    $('#sidebar').css('left', offset.left+'px');
});

Answer 2

此处： http ： //jsfiddle.net/Jmh4B/2/

 #sidebar   
 {
    left: 0;
 }