6

ページの幅に応じて高さが変化し、コンテンツを下に押し戻す固定要素をページの上部に配置する方法を探しています。私はこれまで何かを管理してきましたが、もっとクリーンなソリューションを望んでいます。私がしたことは、同じ内容の2つの上位要素を持つことです。1つは固定位置に設定され、もう1つは相対位置に設定されていますが、不透明度はありません...

#top-1 { position: fixed; background-color:#fff}
#top-2 {position: relative; opacity:0;}
#content { background-color: #FFF; background-color:#CCC }

ここに例を設定しましたhttp://jsfiddle.net/q3G7F/6/ それは私が必要としているとおりに機能しますが、誰かがより良いアイデアを持っているかもしれません。
ありがとう、

4

2 に答える 2

3

これは、小さなjQuery（またはjavascript）スニペットを使用して行うことができます。
CSSを次のように変更します。

#top-1 { position: fixed; top: 0; background-color:#fff}
#content { background-color: #FFF; background-color:#CCC }​

このスクリプトをページの下部に追加します（jQueryが必要です）。これにより、コンテンツに上部マージンが追加され、上部要素用のスペースが確保されます。

<script>
    $(document).ready(function() {
       $('#content').css('margin-top', $('#top-1').height() + 'px');
    }); 
</script>

これが実際の例です：http：//jsfiddle.net/g6CnA/。

アップデート

また、ウィンドウのサイズ変更イベントをリッスンし、上部の要素の高さが変更されたときにマージンを調整する必要があります。

$(document).ready(function() {
    $('#content').css('margin-top', $('#top-1').height() + 'px');   
}); 

$(window).resize(function() {
    $('#content').css('margin-top', $('#top-1').height() + 'px');        
});

</ p>

jsFiddle： http: //jsfiddle.net/g6CnA/1

于 2012-11-09T13:48:49.563 に答える
0

#top-1CSSで、との親要素に明示的な高さ（pxまたは％ではないもの）を設定すると、のとのを同じパーセンテージ#contentに設定できるはずです。これにより、目的の動作が得られますが、この特定の方法は、親の高さを明示的に設定できる場合にのみ機能します。height#top-1margin-top#content

于 2012-11-09T14:36:51.737 に答える