1

ウェブサイトで div を配置するのは初めてなので、誰かがここで助けてくれることを願っています。私が取得しようとしているのは、2 つの div の中央にスクロール コンテンツを配置したサンドイッチ タイプのセットアップです。ヘッダー div とフッター div があり、どちらもページ上で静的なままにしておく必要があります。次に、それらの間に、2 つの固定 div の間のスペースを埋めるコンテンツ div が必要であり、独自にスクロールする機能が必要です。このような単純なものを構築するにはどうすればよいでしょうか。それとも、これはまったく単純ではありませんか？

更新:私が欲しいと思うフィドルを作成しました。ヘッダーとフッターがページ上で静的なままになっています。ただし、ヘッダーの直後にコンテンツが開始されるように、メイン div の上マージンをだます必要があります。私がまだ持っている唯一の問題は、実際には、コンテンツの最後がフッターによって下部で切り取られていることです. コンテンツ全体を見る必要があります。

フィドル: http://jsfiddle.net/fgskS/18/

ありがとうございました！

4

2 に答える 2

3

連続する要素の高さを 100% に設定し、コンテンツ DIV を Y 軸上でスクロールするように設定するだけです。

<header>
    <h1>Sandwich Layout</h1>
</header>
<div id="main" role="main">

</div>
<footer>
    Footer stuff here
</footer>

html,
body { height: 100%; margin: 0; padding: 0; } /* This is important */

header,
footer { background: #ccc; height:20%; }

#main { height: 60%; overflow-y:scroll; }

フィドル: http://jsfiddle.net/kboucher/3E8Gg/

2020年更新:

HTML:

<header>
    <h1>Sandwich Layout</h1>
</header>
<div class="main" role="main">
  <div class="fake-height">Content here</div>
</div>
<footer>
    Footer stuff here
</footer>

CSS:

body,
html {
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  background: #eee;
  padding: 1rem;
}

.main {
  flex: 1 0 auto;
  height: 0; // prevents flex box expanding out of view-height
  overflow-y: auto;
  padding: 1rem;

  .fake-height {
    height: 1000px;
  }
}

https://codepen.io/kboucher/pen/dyomxWN

于 2012-10-08T21:26:07.010 に答える
1

ヘッダーとフッターの div を固定に設定すると、コンテンツのメイン div を作成して、希望どおりにスクロールできます。

于 2012-10-08T21:09:22.967 に答える