css - パーセント+静的値のcss

Question

私は次のことが間違っていることを知っていますが、似たようなものを生成する簡単な方法は何ですか？

 .classhere{
 width: 50px + 10%
 }

したがって、ここでのdivの最小幅は50px幅+ 10％（たとえば、親は100px）なので55pxであり、親がフルスクリーンになると、たとえば1800pxの.classhereの幅は50+180pxになります。

アップデート：

javascript、jQueryおよびその他のソリューションは大歓迎です

score 1 · Accepted Answer

あなたは従うようにそれをすることができます。

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent{
    width:100px;
    height:100px;
    background-color:blue;
}

.child{
    background-color:green;
}

jQuery

$(document).ready(function(){
    $(".child").width(50+($(".parent").width()*0.1));
    $(".child").height(50);
});

デモを見たい場合は、jsfiddleがここにあります

score 1 · Accepted Answer

画面の幅を取得してから幅を設定するには、javascript を使用する必要があります。http://api.jquery.com/width/

score 1 · Accepted Answer

Android や Opera ではサポートされていませんが、CSS calc() はこの種のもののために作られています。

ブラウザーの互換性については、これを参照してください: http://caniuse.com/calc

.classhere{
    width: -webkit-calc(50px + 10%);
    width: -moz-calc(50px + 10%);
    width: calc(50px + 10%);
}

3 に答える 3