Question

我有一个真正的残余布局，我无法解决..

- 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技巧在这里相当棘手..）或任何其他想法来实现这种布局？

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

Answer 1

你可以使用float：right代替绝对位置

sample

Answer 2

金是对的。将div id="sidebar" 浮动：向右，并使div id="main" 溢出：隐藏

div id="main"然后会调整到您的浮动元素，就好像它有 float：left

Css布局 - 重叠div

2 个答案: