1

十分に単純なレイアウトと思われるものを実装したいと思いますが、CSS に奇妙な問題があります。

私が本当に必要とするものには3つの部分があります：

1) ユーザーがスクロールすると常に表示されるスティッキー ナビゲーション バーが欲しい (twitter.com など)

2) 私のフッターでは、コンテンツの高さに関係なく、常にページの下部にフラッシュしたいと考えています。（注：固定フッターではなく、常にページの下部にフラッシュされるか、コンテンツの下に大量のコンテンツがあります）.

3) 最後に、これは私が本当に立ち往生しているところです。コンテンツ領域 (ヘッダー/フッターの間) を表示領域の 100% にしたいのですが、それ以上のコンテンツがない限り、通常のようにスクロールします。

例として、私のホームページは長い引用なので問題ありませんが、他のコンテンツ ページは小さいですが、特定の繰り返しの背景画像などが必要で、画面全体を埋める必要がありますが、常に実際のスペースのみを埋めているように見えます。

編集(HTML と CSS を含む)

私はAngularJSを使用しています（したがって、ng-viewです）。

プロジェクトは巨大で、投稿できるように CSS を修正しようとしています。

    <body>
    <div class="wrapper">
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <ul class="nav">
                        <li><a href="#/area1">LINK 1</a></li>
                        <li><a href="#/area2">LINK 2</a></li>
                    </ul>
                    <a class="logoLink" href="#/">
                        <img class="headerLogo" src="static/img/logo.png" >
                    </a>
                </div>
            </div>
        </div>

        <div class="container-fluid full-height">
            <div class="row-fluid full-height">
                <div class="span12 full-height" ng-view>
                </div>
            </div>
        </div>

        <div class="push"></div>
    </div>


    <div class="footer">
        Footer goes here
    </div>
</body>

CSS:

    * {
    margin: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
}

.footer, .push {
    height: 142px;
}

.footer {
    background: #1D1D1B;
    color: white;
}

.container-fluid {
    padding: 0;
    padding-top: 81px;
}

.full-height {
    height: 100%;
    min-height: 100%;
}
4

1 に答える 1