web-dev-qa-db-ja.com

calc()100%+ #px

私はここで可能かどうかさえ確信が持てない何かを達成しようとしています。

私のサイトのナビゲーションの下に特定のドロップシャドウPNG画像を配置しようとしています。ただし、この機能は、画像、div、ボタンなど、サイトで必要なオブジェクトに再利用したいと考えています。基本的に、どのオブジェクトにも同じシャドウイメージを使用します。

Css3 calc()関数を使用して、オブジェクトの高さ@ 100%+ 25px(pngの高さ)を実行しようとしています。

私はスタイリングを試しました:

height: -webkit-calc(100% + 25px); 
height:    -moz-calc(100% + 25px); 
height:      -o-calc(100% + 25px); 

しかし、Firebugで収集できるものから100%+ 25pxは、何も達成されないため、新しい100%になります。

私も試しました:

height: -webkit-calc(100% + 25px); 
height:    -moz-calc(100% + 25px); 
height:      -o-calc(100% + 25px); 
background-position: 0 -moz-calc(100% + 25px);

しかし、ここでも喜びはありません。

Calc(3em + 25px);を使用する場合問題なく動作しますが、これはどのオブジェクトでも動作するほど柔軟ではありません。

これも可能ですか?私も意味がありますか?!

13
user1597713

100%確信はありませんが、 作業ドラフト は、計算の両側の演算子が(単一タイプの)サブ式を形成することを説明しています。

相対値(%)と絶対値(px)を組み合わせているため、計算を完了できない場合があります。

更新:小さなテストを行いましたが、うまく機能しているようです。 HTML内のセレクターと位置が正しいことを確認しますか?これを確認してください フィドル

10
Damien