6

この Web ページを参照してください。

  1. 最初にスクロールしてみてください。左側のバーが固定されていることを確認してください。
  2. ウィンドウの高さを変更して、左側のバーのすべてのコンテンツが表示されないようにします。今スクロールします。今回は、左のバーが固定されていません。

このページには、左バーの高さを計算し、それをウィンドウの高さと比較して、左バーの位置を固定または絶対にする jquery があります。

ただし、jQueryなどを使用せずに、HTMLとCSSだけで同様のことが達成できるかどうか疑問に思っています。

助言がありますか？要するに、私が探しているのは、コンテンツが固定されたままのバーですが、コンテンツがオーバーフローするとスクロールされるバーです。ただし、スクロールはページ全体と一緒にする必要があります。

4

1 に答える 1

8

メディア クエリを使用して特定の画面サイズ (およびその他のもの) で CSS を指示できるため、画面が小さすぎる場合は 1 つのスタイルシートを使用できます。私は専門家ではないので例はありませんが、http://css-tricks.com/css-media-queries/をご覧ください。ごめん！しかし、あなたはそれを理解したと思います:)

編集：作業結果は次のとおりです。

#leftnav {
    /* default look */
    width: 300px;
    position: fixed;
    top:0;
    height: 100%;
}

/* set the size at which the content is clipped and we cannot have fixed position */
@media all and (max-height: 500px) {
    /* things inside here will only have an effect if the browser window shows
       less than 500 px in the height, so here I apply the special rules */
    #leftnav {
        position: absolute;
        height: auto;
        /* etc.. */
    }
}
于 2012-06-06T14:09:20.243 に答える