1

の中に 2 つdivの s がネストされていdivます。

<div id='outter' class='one'>
    <div id='inner'></div>
    <div id='button' class='bttn'>Click me!</div>
</div>

outterdivの高さは、ページのパーセンテージです。内側divの高さの 1 つを外側から一定の差div(つまり$('#inner').height($('#outter').height() - 35)) にしたいのですが、2 番目の内側divは本質的に高さが固定されたボタン (35) であるためです。高さを変更した場合でも（CSSトリガー（ホバー/クラスの追加/など、トランジションを使用できるように）またはその他の方法で）これが発生することを望みます。

少しグーグルで検索したところ、Lessが答えかもしれないことがわかりましたが、静的な値にコンパイルされることがわかりましたが、このアプリをどの画面サイズでも同じように動作/感じさせたいので、パーセンテージを使用する必要があります.

私が現在行っていることの例/いくつかのjsfiddlesでそれについて考えている方法があります。

現在の「解決策」: http://jsfiddle.net/L9NVj/5/ (エンドハイトは私が望んでいるものですが、トランジションはひどく見えます)

理想的な「解決策」: http://jsfiddle.net/L9NVj/6/ (端の高さは間違っていますが、内側のdiv抱擁は適切です)

考えられる解決策: http://jsfiddle.net/L9NVj/7/div (これにより、クリック時に内側が非表示になり、適切なサイズに達すると再び表示されます)

どんな助け/考え/洞察も大歓迎です!

4

5 に答える 5

4

外側の要素のサイズはサイズ/位置によって制御されないため、内側の要素を絶対配置することを検討してください。

#inner {
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 35px;
    /* ... */
}

.bttn {
    position: absolute;
    bottom: 2px;
    left: 2px;
    /* ... */
}

例: http://jsfiddle.net/L9NVj/9/

于 2013-10-02T15:46:16.373 に答える
1

競合する絶対配置についてはどうですか。これを行うには、要素の上、下、左、右を設定して、#innerそれらを遷移させるだけです。これにより、要素の端の周りの距離が維持され、他の配置も可能になります。

この場合、実際に値を計算する必要はありませんが、将来的にcalc()は CSS で動的な値を計算するために使用できることに注意してください。height: calc(100% - 37px);その場合、同じ効果を得るために何かをすることができます。

于 2013-10-02T15:47:08.297 に答える
1

CSS3calc()は、サポートされていないブラウザーの JavaScript フォールバックと組み合わせて、探している答えですcalc()。「理想的なソリューション」フィドルで、CSS の高さの定義を次のように変更します。

height: -webkit-calc(100% - 35px);
height: calc(100% - 35px);

Can I Useによると、通常はすべてのプレフィックスを含める必要がありますが (ブラウザーのサポートのレベルによっては、必要な場合もあります)、現在プレフィックスを付ける必要があるブラウザーは-webkitブラウザーのみです。

この知識を使って私ができることは次のとおりです。機能検出スクリプトを取得します。私はModernizrが本当に好きで、それがブラウザーで利用可能かどうかを検出しますcalc()。Modernizr には、使用できる非コア検出calc()があります。CSS ファイルでその CSS をデフォルトとして使用し、yepnope (Modernizr に付属) などのリソース ローダーを使用して、JS ソリューションcalc()が利用できない場合はロードします。

あなたの JavaScript ソリューションのうち、おそらく「潜在的なソリューション」オプションをお勧めしますが、jQuery のhide()andの代わりにshow()、不透明度を 0 と 1 に設定し、CSS3 トランジションを使用して 2 つの間をトランジションします。また、タイムアウトに依存するのではなく、transitionendJavaScript イベントを使用します。

于 2013-10-02T16:42:45.980 に答える
0

私はあなたの最初の jsfiddle を少し編集しました。それがあなたが望んでいたことだと思います。行を追加しただけです。

$(window).resize(function(){$('#inner').height($('#outter').height() - 35)});

jsfiddle: http://jsfiddle.net/Qqb3g/

ボタンがクリックされたときに遷移をスムーズにするために、いくつかの回避策が必要になる場合があります。

于 2013-10-02T15:51:06.673 に答える