1

下部に簡単なナビゲーションがあるサイトがあります。そのナビゲーションの左側の高さは 100px に固定されています。

.mainNavigationWrapper{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
}

今、特定のボタンがクリックされたときにボックスをフェードインしたいと考えています。そのボックスは、ドキュメントの上部からナビゲーションの先頭まで届くはずです。ナビゲーションの高さは固定されていますが、ボックスの高さは動的であるため、どうすればこれを達成できますか?

私の個人的な回避策は、次のスクリプトです。

(function() {

var height = $(window).height() ;

console.log(height) ;
height = height - 100 ;

$('.treeMenu').css({
    'height': height
});

$(window).resize(function(){
    var height = $(window).height() ;

    console.log(height) ;
    height = height - 100 ;

    $('.treeMenu').css({
        'height': height
    });
});

}());

しかし、それは私には間違っているようです。これを行うためのより良い方法があるかどうか、おそらく純粋な CSS を使用して知りたいです。

上記の解決策で解決された、問題を示すためのフィドルを次に示します。

JSFiddle

前もって感謝します

4

2 に答える 2

1

http://jsfiddle.net/PpDQh/

.treeMenu{
overflow-y: auto;
position: fixed;
top: -100px;
background: rgba(18, 24, 18, 0.86);
width: 15em;
height: 100%;
}
.padder {
padding-top: 100px;
}

treeMenu の高さを 100% に設定し、内部に padder-div を追加しました。

基本的に、追加の 100px を上部に重ねます。

于 2013-04-10T11:14:51.223 に答える