1

作成中の HTML ページの右側に固定位置の div があります。この div は、ページがスクロールされるときにスティッキーになることを意図しています。問題は、小さい画面ではページに完全に収まらないため、一部のコンテンツが非表示になることです (例: http://jsfiddle.net/uJN4Q/ )。

この問題を解決するために、コンテンツをdivコンテナー内に配置し、コンテナーdivにdiv値bottomを設定し、内側の div をコンテナーの div の高さの 100% に設定overflow: autoし、内側の div を設定しました。このソリューションの問題は、大きな画面では、内部 div の下部に大量の醜い空白が表示されることです。

テキスト全体が表示され、div が静止position: fixedし、div の下部がテキストの最後の行に「くっつく」ようにして、div の下部に空白がないようにする方法はありますか?

4

2 に答える 2

0

CSS Media クエリを使用して、デバイスの幅と高さを検出し、それに応じてその div に css を適用する必要があると思います。

@media screen and (min-width: 960px) {
  div{position:absolute;/*Or whatever u want*/
}

また

Javascript を使用してデバイスを検出できます。css と javascript を使用してこれを行うためのリンクは次のとおりです。

http://css-tricks.com/resolution-specific-stylesheets/

于 2012-06-02T09:49:05.677 に答える
0

CSS @media クエリはどうですか?

@media (max-width: 600px) {
    #sticky_part {
        position: absolute;
        top: 0; 
        left: 0;
        width: 100%;
        height: 35px;
    }
}

ドキュメントが十分に小さい場合、この粘着性のある部分が上に突き出て、サイトの他のコンテンツを妨げません。私のマイクロブログhttp://jscal.esでは、この手法を使用しています。

于 2012-06-02T05:17:57.243 に答える