CSS 布局 - 重叠的 div

发布于 2024-12-14 15:45:22 字数 1307 浏览 3 评论 0原文

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

- 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/

原文

I have a really stuburn layout, that I just can not resolve ..

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

(if the above is not clear - header,left/main,right/sidebar,footer are INSIDE the right column)

now, this layout sort of working ,

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

but still I have one annoying problem -
when the main content is not long enough - the sidebar and the footer are overlapping ..
That is because the sidebar is : absolute positioned - but then again, If i make it relative, and the page is being re-sized, the sidebar goes UNDER the main ... (not enough space for fluid ...)
so , my question is this ,
Anyone has an Idea how to keep the footer UNDER the sidebar ? (jQuery sticky tricks not working, and CSS tricks are quite tricky here..)
or any other ides to achieve this layout ?

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

分享到QQ

分享到微博