0

オーバーフローしたときにスクロールするように設定された固定サイズのボックスがあります。ただし、ヘッダーがある場合とない場合があります。ヘッダーが表示されたときに見栄えがするようにスタイルを設定する方法がわかりません。なぜそれが起こるのかは正確にわかっています (ヘッダーが高さ 100% のスクロール要素を押し下げてコンテナーから押し出します) が、それを修正するテーブル以外の方法がわかりません。これが問題を示すフィドルです。SO アーカイブの完全なコード:

HTML:

<div class="fixed-size">
  <ul class="scrollable">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
    <li>eight</li>
    <li>nine</li>
    <li>ten</li>
  </ul>
</div>

<div class="fixed-size">
  <div class="stays-at-top">
      Header
  </div>
  <ul class="scrollable">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
    <li>eight</li>
    <li>nine</li>
    <li>ten</li>
  </ul>
</div>

CSS:

.fixed-size {
    height: 100px;
    width: 200px;
    display: inline-block;
    background-color: #fcc;
}

.scrollable {
    height: 100%;
    width: 100%;
    overflow-y: auto;
}

.stays-at-top {
    background-color: #f99;
}​

はっきりしない場合は、ヘッダー ( .stays-at-top) を一番上に置いておきます (つまり、彼の友達と一緒にスクロールしないでください)。

4

2 に答える 2

1

http://jsfiddle.net/EyPQW/6/

.fixed-size {
    width: 200px;
    display: inline-block;
    background-color: #fcc;
}
.scrollable {
    height: 100px;  
    overflow: auto;    
}
.stays-at-top + .scrollable {
    margin-top: 17px;
    height: 83px;     
}
.stays-at-top {
    background-color: #f99;
    position: fixed;
    width: 200px;
}​

これは完全な要件を満たす必要があります。

.fixed-sizeを指定しますが、 は指定しwidthませんheight。

.scrollableheightとを指定しoverflow: autoて、その内容をスクロールできるようにします。

.stays-at-top + .scrollable.stays-at-topと.scrollable要素が互いにすぐ隣接している場合、つまり固定ヘッダーがある場合に一致します。ここではmargin-top、最初の項目が固定ヘッダーをクリアできるようにするためにa を追加heightし、値を で指定された値から値を.scrollable引いたmargin-top値にリセットします。

.stays-at-topposition: fixedとwidth一致するwidthinが必要.fixed-sizeです。

于 2012-06-05T02:45:37.697 に答える
0

scrollableクラスを親に移動し、 , を削除してheight:100%、を単にwidth:100%に変更します。overflow-y:autooverflow:auto

そのため：http://jsfiddle.net/jglovier/U8rPj/4/

于 2012-06-05T02:29:29.010 に答える