1

HTML(5) と Twitter Bootstrap を使用して、このようなレイアウトを作成する方法を見つけようとしています。

モックアップ

IE < 9 (ただし 8 が望ましい) または古いバージョンの Firefox/Chrome ではサポートする必要はありません。ただし、固定された左側のメニューが非常に小さなディスプレイで問題になることはわかっていますが、モバイル デバイスでは適切に表示されるはずです。その主な用途は、デスクトップとタブレットです。

これらのthis、this、およびthisのような例/類似点を変更しようとしましたが、運がありませんでした。

このようなレイアウトを見つけることができる例を知っていますか、またはそれを作成する方法を知っていますか? どんな助けでも大歓迎です！

4

3 に答える 3

1

以下は簡単な例ですが、要件を満たす必要があります。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">

        /* Don't include the * reset just for demonstration purposes only */
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
        }

        #sidebar {
            background: green;
            height: 100%;
            position: absolute;
                left: -260px;
                top: 0;
            width: 260px;
        }

        #container {
            background: blue;
            margin: 0 0 0 260px;
            min-height: 100%;
            position: relative;
        }

        #footer {
            background: red;
            height: 60px;
            position: fixed;
                bottom: 0;
            width: 100%;
        }


    </style>

</head>
<body>
    <div id="container">
        <div id="sidebar">
        sidebar
        </div>

        container
    </div>
    <div id="footer">
        I am a footer
    </div>

</body>
</html>
于 2013-02-14T14:26:36.160 に答える
1

これはうまくいくかもしれません：

HTML

<div id="wrapper">
    <div id="left-column"></div>
    <div id="right-column"></div>
</div>
<div id="footer">
</div>

CSS

body, html {height:100%; padding:0; margin:0;}
#wrapper {height:100%; padding:0 0 60px 260px; box-sizing:border-box; -moz-box-sizing:border-box;}
#left-column {width:260px; margin-left:-260px; float:left; height:100%; background-color:red; overflow-y:scroll;}
#right-column {width:100%; float:left; height:100%; background-color:blue; overflow-y:scroll;}
#footer {height:60px; position:fixed; bottom:0; left:0; width:100%; background-color:green;}

http://jsfiddle.net/rGBAt/1/

現時点では、overflow-y がスクロールするように設定されていますが、jquery を使用して追加することをお勧めします。そのため、Chrome などのブラウザーにスクロールバーが常に追加されるとは限らず、Twitter ブートストラップと互換性があるかどうかはわかりません

このバージョンでは、コンテンツが大きくなりすぎるとオーバーフローが追加されます。

http://jsfiddle.net/rGBAt/7/

于 2013-02-14T14:29:59.013 に答える
0

フッターについては、ブートストラップナビゲーションバーの使用を検討しましたか？クラスnavbar-fixed-bottomを使用して、それを下部に修正できます。常に表示されます。

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <ul class="nav">
            <li><a href="#">footer</a></li>
        </ul>
    </div>
</div>

ブートストラップを使用しているため、左側のdivの[接辞]メニューオプションを検討する必要があります。これにより、スクロール中にメニューを画面に表示したままにすることができます。

于 2013-02-14T15:41:55.253 に答える