40

私は次のhtmlを持っています...

<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>

そして次のcss...

.header{
position: fixed;
background-color: #f00;
height: 100px;
}
.main{
background-color: #ff0;
height: 700px;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;}

しかし、ヘッダーとフッターが固定されていないのはなぜですか? 「メイン」のみをスクロール可能にし、「ヘッダー」と「フッター」を固定位置にしたい。実行する方法？

+-------------------------------------+
|     header                          |  -> at fixed position (top of window)
+-------------------------------------+
|       main                          |
|                                     |
|                                     | -> scrollable as its contents
|                                     |    scroll bar is window scroll bar not of main
|                                     |
|                                     |
+-------------------------------------+
|         footer                      |  -> at fixed position (bottom of window)
+-------------------------------------+

このフィドルを参照してください

4

14 に答える 14

24

ヘッダーとフッターに幅を明示的に指定する必要があります

width: 100%;

働くフィドル

中間セクションを非表示にしない場合は、(ヘッダーとフッターの高さに関連する) プロパティを与えposition: absolute;width: 100%;て設定し、親要素を与えます。（もちろん、削除します。）スクロール可能にするには、.top and bottomposition: relativeheight: 700px;overflow: auto

于 2013-06-02T04:25:46.740 に答える
17

backface-visibility含まれている要素のいずれかで有効にしていないことを再確認してくださいposition: fixed。私にとっては、CSS3 アニメーション ライブラリを使用していました...

于 2014-02-18T00:23:21.353 に答える
7

動作中のjsFiddleデモ

fixedorabsoluteの値を操作する場合は、 topor bottomand leftor right(またはそれらの組み合わせ) プロパティを設定することをお勧めします。

heightまた、 of要素を設定しないでくださいmain(ブラウザが設定topとbottomプロパティで高さを設定できるようにします)。

.header{
    position: fixed;
    background-color: #f00;
    height: 100px;
    top: 0;
    left: 0;
    right: 0;
}
.main{
    background-color: #ff0;
    position: fixed;
    bottom: 120px;
    left: 0;
    right: 0;
    top: 100px;
    overflow: auto;
}
.footer{
    position: fixed;
    bottom: 0;
    background-color: #f0f;
    height: 120px;
    bottom: 0;
    left: 0;
    right: 0;
}
于 2013-06-02T04:23:59.280 に答える
1

幅が設定されておらず、div にコンテンツがないことが 1 つの問題です。もう 1 つは、html の動作方法です... 3 つすべてが固定されている場合、階層が下から上に移動するということです...両方が固定されているため、コンテンツはヘッダーの上にあります...したがって、この場合はヘッダーでz-indexを宣言する必要があります...しかし、私はそうしません...正常にスクロールできるように、その相対値を残します。

これで最初にモバイルに行く... ここでフィドル

HTML

<header class="global-header">HEADER</header>

<section class="main-content">CONTENT</section>

<footer class="global-footer">FOOTER</footer>

CSS html、本文 { パディング: 0; マージン: 0; 高さ: 100%; }

.global-header {
    width: 100%;
    float: left;
    min-height: 5em;
    background-color: red;
}

.main-content {
    width: 100%;
    float: left;
    height: 50em;
    background-color: yellow;
}

.global-footer {
    width: 100%;
    float: left;
    min-height: 5em;
    background-color: lightblue;
}

@media (min-width: 30em) {

    .global-header {
        position: fixed;
        top: 0;
        left: 0;
    }

    .main-content {
        height: 100%;
        margin-top: 5em; /* to offset header */
    }

    .global-footer {
        position: fixed;
        bottom: 0;
        left: 0;
    }

} /* ================== */
于 2013-06-02T04:27:55.977 に答える
1

2 つの div の幅を追加するのを忘れました。

.header {
    position: fixed;
    top:0;
    background-color: #f00;
    height: 100px; width: 100%;
}
.footer {
    position: fixed;
    bottom: 0;
    background-color: #f0f;
    height: 120px; width:100%;
}

デモ

于 2013-06-02T04:27:57.257 に答える
0

質の高い Web サイトをユーザーに届けるために努力し続ける限り、人々が IE6 を離れるよう説得することはできません。

IE7+ のみが「位置: 固定」を理解しました。

https://developer.mozilla.org/en-US/docs/Web/CSS/position

したがって、IE6 には不向きです。フッターをセミスティッキーにするには、次を試してください。

.main {
  min-height: 100%;
  margin-bottom: -60px;
}
.footer {
  height: 60px;
}

iFrame を使用することもできます。

これにより、フッターがページの下部から「浮き上がる」ことを防ぎます。コンテンツのページが複数ある場合は、サイトの外に押し出されます。

哲学的な観点から言えば、私は IE6 ユーザーにhttp://browsehappy.com/を参照してもらい、IE6 のハッキングで節約した時間を別のことに費やしたいと考えています。

于 2013-06-02T05:20:30.087 に答える