0

私は次のようなウィンドウ内アプリを作成しようとしています

http://jsfiddle.net/szfkn/5/構造ですが、sizebars / footer / header / contentで重ならないようにしたいのですが、流動的なレイアウトを維持しながらこれを行う方法はありますか？

または、スクロールや流動性のないウィンドウにコンテンツを保持するための適切な指針。

4

2 に答える 2

5

スティーブサンダーソンは彼のブログで、素敵なcssレイアウトを生成する方法に関するいくつかの指針を共有しました：http：//blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to- make-it-easier /

それがあなたが探している答えであるかどうかはわかりませんが、それは間違いなく読む価値があります:)

于 2012-03-15T10:53:20.477 に答える
0 
<html>
<head>
    <title>Fluid Layout</title>
<style>
    .hBar, .vBar
    {
            opacity:.5;
            position:absolute;
            font-weight:bold;
            font-family:Tahoma, Arial, Times New Roman;
            text-align:center;
    }
    div
    {
        display:block;
    }
    .hBar
    {
        height:10%;
        width:100%;
            left:0px;
        z-index:5000;
        font-size:1.2em;
    }
    .vBar
    {
        width:5%;
        height:100%;
        top:0%;
        z-index:3000;
        font-size:.7em;
        color:Lime;
    }
    div#TopWrap
    {
        background-color:#000;
        top:0%;
    }
    div#RightWrap
    {
        background:#0FF;
        right:0px;
    }
    div#BottomWrap
    {
        background-color:#F00;
        bottom:0px;
    }
    div#LeftWrap
    {
        background-color:#FF0;
        left:0px;
    }
    div#ContentWrap
    {
        padding:7% 0% 0% 8%;
        position:relative;
        z-index:1000;
    }
</style>
</head>
<body>
    <div id="TopWrap" class="hBar">
        Top Wrap</div>
    <div id="RightWrap" class="vBar">
        Right Wrap</div>
    <div id="BottomWrap" class="hBar">
        Bottom Wrap</div>
    <div id="LeftWrap" class="vBar">
        Left Wrap</div>
    <div id="ContentWrap">
        <h3>
            Fluid Layout</h3>
        <div>
           @* Content goes here *@
        </div>
    </div>
</body>
</html>

ブラウザの互換性を保証することはできませんが、優れた基盤を得ることができます。私が提供した例は、コンテンツラッパーを埋めるだけです。div＃ContentWrapのスタイルを次のように変更できます：'margin：15％; overlay：hidden;'。そのコンテナに配置するパディングは、全体のサイズに影響することに注意してください。

コンテンツのスクロールに関しては、コンテンツのスクロールに役立つjQueryプラグインがたくさんあります。 http://jquerytools.org/demos/scrollable/vertical.htmlには、探しているものの良い例があるようです。

頑張ってください！

于 2012-03-15T04:01:49.863 に答える