1

我有一个非常顽固的布局，我无法解决..

- Left column - Fixed,Static (always in view)
- Right column - Fluid/liquid/scrollable
--- Header - fixed 
--- left/main fluid/liquid
--- Right/sidebar - fixed width
--- footer

（如果上述内容不明确 - 页眉、左/主、右/侧边栏、页脚位于右栏内）

现在，这种布局有点工作，

<div id="left-col">left col</div>

<div id="container">

    <div id="header">header</div>
    <div id="main">
        <div id="sidebar">sidebar</div>
        main
    </div>
    <div id="footer">footer</div>
</div>

#left-col {
    width: 50px;
    position: fixed;
    background: yellow;
    left: 0;
    top: 0;
}
#container {
    margin-left: 50px;
    background: black;
}
#header {
    background: green;
}
#main {
    background: blue;
    position: relative;
}
#sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    background: pink;
}
#footer {
    background: red;
}

但是我仍然有一个烦人的问题-当主要内容不够长时-侧边栏和页脚重叠..那是因为侧边栏是：绝对定位-但话又说回来，如果我将其设为相对，则页面是重新调整大小后，侧边栏位于主要下方……（没有足够的空间容纳流体……）所以，我的问题是，任何人都知道如何将页脚保持在侧边栏下方？（jQuery 粘性技巧不起作用，CSS 技巧在这里非常棘手..）或任何其他 ide 来实现这种布局？

JSFIDDLE：http: //jsfiddle.net/VNU6Z/

4

2 回答 2

2

您可以使用 float:right 代替绝对位置

样本

于 2011-11-11T14:02:42.717 回答
1

金是对的。使div id="sidebar" float:right，并使div id="main" 溢出：隐藏

div id="main"然后将调整为浮动元素的大小，就好像它有float:left

于 2011-11-11T14:25:32.023 回答