0

さて、私は単純なコードであるべきものでかなり厄介な問題を抱えています.重複を検索しましたが、少し違うようです. これが私の基本的なレイアウトです：

html:

<div id="wrapper">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

CSS:

html,body,#wrapper {
    height: 100%;
    margin: 0;
    padding: 0;
}

#wrapper {
    position:   relative;
}

#header {
    position:   fixed;
    top:    0px;
    height: 40px;
    width:  100%;
    color:  white;
    background-color: #000000;
}

#content {
    position:   fixed;
    padding-bottom: 50px; /* to match the footer height*/
    top:    40px;
    bottom: 50px;
    height: 100%;
    width:  100%;
    overflow:   auto;
}

#footer {
    position:   fixed;
    bottom: 0px;
    height: 49px;
    width:  100%;
    border-top: 1px solid #000000;
    background-color:   skyblue;
    font-weight:    bold;
}

ラッパー内の 3 つの div がページの 100% を占めるという考え方です。つまり、すべてが常に表示されます。上部にヘッダー、下部にフッター、中央にコンテンツをそれぞれ配置します。

フッターとヘッダーは、ページの残りの部分を自動的に占めるようにしたいコンテンツ (ピクセルまたはページの高さの割合) を固定することができます。

問題は、ページの解像度がさまざまに異なる可能性があることです (そのため、javasript を使用しない限り、コンテンツの高さを固定することはできません)。もう 1 つのことは、コンテンツ div にはさまざまな量の要素を含めることができるということです。つまり、ヘッダーとフッターの両方を表示したままコンテンツをスクロールできるようにする必要があります。主な部分は次のとおりです。スクロールホイールは、ページ全体ではなく、コンテンツ div 内にある必要があります。

このcssで必要なものはほとんどありますが、コンテンツのdivをオーバーフローすると、一部のコンテンツにスクロールできません(垂直オーバーフローについて話している-水平オーバーフローはありません)。助けていただければ幸いですが、オーバーフローには固定の高さが必要だと思うので、可能であれば、これは見た目ほど簡単/単純ではありません: auto.

可能であれば、純粋な css ソリューションが必要なので、JqueryMobile について (またはこれまで) 言及しないでください。

コンテンツ div のスクロール ホイールの問題に注目してください。 オーバーフロー動作を除いて、レイアウトはほぼ正しい

4

1 に答える 1

1

私はこれが起こるのが嫌いです...投稿した直後に解決策を見つけたので、もう1つ試してみることにしました.#contentの高さを「自動」に設定しました。スクロールホイール、問題はdivの高さにあることが明らかになりました）！テストして、すべて/ほとんどのブラウザーに当てはまることを確認する必要があります!

多分それは他の誰かに役立つでしょう！

于 2013-03-24T22:40:46.290 に答える