0

Web サイトを構築していますが、div のスクロールバーでいくつかの問題に直面しています。固定のヘッダーとフッターがあり、その間の div はヘッダーとフッターの間にある必要があります。オーバーフローの場合、スクロールが表示されます。

私がしようとしているのは、ヘッダーとフッターが固定されたdivでスクロールバーを取得する方法に似ていますか?

しかし、私はそれを正しく動作させることはできません。

私がしようとしているもののJSフィドル

フィドル

与えることで機能させることができますbody{height: 84%;}が、ブラウザによって異なります。

4

2 に答える 2

1

編集：

jsfiddleが戻ってきたので...

ここにあなたが望んでいたものの更新されたフィドルがあります

必要な主な変更は次のとおりです。

div[role="main"]
{
    height: 100%;
    background: pink;
    margin: -70px 0 -30px;
    padding: 70px 0 30px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #4CD3BF;
}

次のようにします。

あまり内容がない: CODEPEN1

たくさんのコンテンツ: CODEPEN2

マークアップ

<div class="container">
  <header></header>
  <div class="content"></div>
  <footer></footer>
</div>

CSS

/* ヘッダーとフッターの高さを 64px と仮定 */

.container
{
    height: 100%;
    background: pink;
    margin: -64px 0;
    padding: 64px 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content {
    overflow:auto;
    height:100%;
}
header
{
    height: 64px;
    background: purple;
    position: relative;
    z-index:1;
}
footer
{
    height: 64px;
    background: gray;
    position: relative;
    z-index:1;
}
于 2013-08-12T10:10:23.230 に答える