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;
 }

CSS布局问题 - 在包装器上定位边栏

2 个答案: