2012-03-08 10 views
0

ページの高さ全体に移動するはずの垂直ナビゲーションバーがあります。スクロールのない小さなページでは、スクロールしますが、一度スクロールすると、スクロールバーがスクロールした直後に終了し、スクロールしても表示されなくなります。 CSSは:要素は折りたたみの下にレンダリングされません。

.top-bar { 
    width: 80px; 
    min-width: 0; 
    background: url(../img/grad-overlay-hz.png) #292929; 
    float: left; 
    height: auto; 
    min-height: 100% !important; 
    border: none; 
    border-right: 1px solid #515151; 
    margin: 0; 
    padding: 0; 
} 
+0

バーはページ全体の高さ(イベントの下の折り畳み領域)またはブラウザウィンドウだけであると考えられますか? – evasilchenko

+0

ページの高さ全体、ウィンドウの高さが問題です;)。 –

+0

htmlはナビゲーションが座っている場所のように見えますか? bodyとhtmlタグについてもmin-heightを100%に設定しようとしましたか? – evasilchenko

答えて

0

私はposition:fixedプロパティを使うべきだと思います。これにより、ナビゲーションバーが常にビューポートに保持されます。

.top-bar { 
    width: 80px; 
    min-width: 0; 
    background-color: #292929; 
    position: fixed; 
    height: 100%; 
    border: none; 
    border-right: 1px solid #515151; 
    margin: 0; 
    padding: 0; 
}​ 
+0

それは私にとってはうまくいくが、ナビゲーションアイコンはかなり大きく、バー全体の高さはほぼ800pxなので、小さな画面やタブレット/携帯電話の人はナビゲーション要素を一切見ることができない。 –

+0

それは正しいです。また位置:固定は携帯デバイスでうまく動作しません。だからあなたはそれを使わないほうがいいと思う。 カットオフ効果はよくわかっていますが、私は今修正を覚えていません。ここであなたが読んでいるかもしれない説明です:http://delvauxkoen.blogspot.com/2010/01/common-css-bug-with-viewport-scrolling.html – koenpeters

+0

あなたはメディアのクエリを使用してコンテンツのサイズを調整しようとすることができますそれを固定しておく。 –

関連する問題