5

内部に他の 2 つのdiv をposition: fixed含む の div があります。

次に例を示します。

.scroller {
  position: fixed;
  border: 1px solid #ddd;
  width: 240px;
  height: 100px;
  top: 0;
  bottom: 0;
  overflow: auto;
}
.footer {
  position: absolute;
  bottom: 0;
}
<div class="scroller">
  <div class="content">
    <div>content</div><div>content</div><div>content</div><div>content</div>
    <div>content</div><div>content</div><div>content</div><div>content</div>
    <div>content</div><div>content</div><div>content</div><div>content</div>
  </div>
  <div class="footer">FOOTER</div>
</div>

問題は、フッター ブロックの position:absolute にもかかわらず、ユーザーがメイン ブロックのコンテンツをスクロールすると、フッターが他のコンテンツと共に移動し始めることです。

HTML構造を変更せずにメイン固定ブロックの下部にフッターを貼り付ける方法はありますか?

そして、メイン div に多くの子が含まれていて、最後の 1 つだけが下に固定する必要があるフッターである場合はどうなるでしょうか? 例：

.scroller {
  position: fixed;
  border: 1px solid #ddd;
  width: 240px;
  height: 100px;
  top: 0;
  bottom: 0;
  overflow: auto;
}
.footer {
  position: absolute;
  bottom: 0;
}
<div class="scroller">
  <div class="content">
    <div>content</div><div>content</div><div>content</div><div>content</div>
  </div>
  <div class="content">
    <div>content</div><div>content</div><div>content</div><div>content</div>
  </div>
  <div class="content">
    <div>content</div><div>content</div><div>content</div><div>content</div>
  </div>
  <div class="footer">FOOTER</div>
</div>

4

1 に答える 1

6

絶対配置された要素は内部に.scrollerあり、スクロール時に移動したくないため、.content代わりにスクロール可能なコンテナーを に配置する必要があります.scroller。

.content {
  height: 100px;
  overflow: auto;
}

さらに、固定ラッパーから削除bottom: 0して、その高さがそのコンテンツ、つまり によって与えられるようにする必要があり100pxます。

.scroller {
  position: fixed;
  border: 1px solid #ddd;
  width: 240px;
}
.content {
  height: 100px;
  overflow: auto;
}
.footer {
  position: absolute;
  bottom: 0;
}
<div class="scroller">
  <div class="content">
    <div>content</div><div>content</div><div>content</div><div>content</div>
    <div>content</div><div>content</div><div>content</div><div>content</div>
    <div>content</div><div>content</div><div>content</div><div>content</div>
  </div>
  <div class="footer">FOOTER</div>
</div>

複数の.content要素が必要で、それぞれを個別にスクロールしたくない場合は、それらすべてを.scroller-innerコンテナーにラップし、上記のスタイルをそれに設定できます。

.scroller {
  position: fixed;
  border: 1px solid #ddd;
  width: 240px;
}
.scroller-inner {
  height: 100px;
  overflow: auto;
}
.footer {
  position: absolute;
  bottom: 0;
}
<div class="scroller">
  <div class="scroller-inner">
    <div class="content">
      <div>content</div><div>content</div><div>content</div><div>content</div>
    </div>
    <div class="content">
      <div>content</div><div>content</div><div>content</div><div>content</div>
    </div>
    <div class="content">
      <div>content</div><div>content</div><div>content</div><div>content</div>
    </div>
  </div>
  <div class="footer">FOOTER</div>
</div>

または、ヘッダーの高さがわかっている場合は、フッターを固定要素にし、余白を使用してその位置を修正できます。ただし、これはちょっとハックです。

.scroller {
  position: fixed;
  border: 1px solid #ddd;
  width: 240px;
  height: 100px; /* val1 */
  top: 0; /* val2 */
  overflow: auto;
}
.footer {
  position: fixed;
  white-space: nowrap;
  top: 100px; /* val1 + val2 */
  line-height: 20px; /* val3 */
  font-size: 16px; /* val4 */
  margin-top: -18px; /* val3/2 + val4/2 */
}
<div class="scroller">
  <div class="content">
    <div>content</div><div>content</div><div>content</div><div>content</div>
  </div>
  <div class="content">
    <div>content</div><div>content</div><div>content</div><div>content</div>
  </div>
  <div class="content">
    <div>content</div><div>content</div><div>content</div><div>content</div>
  </div>
  <div class="footer">FOOTER</div>
</div>

于 2012-08-14T16:19:08.820 に答える