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

しかし、まだ厄介な問題が 1 つあります。メイン コンテンツが十分に長くない場合、サイドバーとフッターが重なっています。これは、サイドバーが絶対配置されているためです。サイズを変更すると、サイドバーはメインの下に入ります...（液体のための十分なスペースがありません...）だから、私の質問はこれです、サイドバーの下にフッターを保持する方法を誰かが考えていますか？(jQuery スティッキー トリックは機能せず、CSS トリックはここでは非常にトリッキーです..) またはこのレイアウトを実現するための他のアイデアはありますか?

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

4

2 に答える 2

2

絶対位置の代わりにfloat：rightを使用できます

サンプル

于 2011-11-11T14:02:42.717 に答える
1

キムは正しい。float div id="sidebar" ：rightを作成し、div id="main" overflow：hiddenを作成します

div id="main"次に、 float：leftがあるかのように、float要素にサイズ変更します。

于 2011-11-11T14:25:32.023 に答える