2016-11-01 2 views
1

ウェブページに赤い四角形を作成します。CSS:width/height属性はpx(%ではない)にのみ応答します

私は、次のHTML要素書くとき:

<div style="{'background': 'red', 'table-layout': 'fixed', 'width': '**10%**','height' : '**10%**'}" 

を私は白のWebページを取得します。しかし

、私は「PX」と書き込みと「%」に置き換えます。

<div style="{'background': 'red', 'table-layout': 'fixed', 'width': '**10px**','height' : '**10px**'}" 

私は、画面の隅に小さな赤い四角を取得します。おそらく、私は間違ったパーセント機能を使用します。何が問題なのか教えていただけますか?

+1

あなたの答えはここにあります。 http://stackoverflow.com/questions/14545507/div-height-in-percentage –

答えて

4

<div class="parent" style="width: 100%; height: 500px"> 
 
    <div style="width: 10%; height: 10%; background: red"></div> 
 
</div>

私はあなたがあなたの比率の幅と高さは、ベースとなる親を持っている必要があると思います。

0

パーセントを使用すると、オブジェクトのサイズを親のパーセントとして定義します。あなたのdivの親が小さいサイズを持っている場合。 10%の幅と10%の高さにdivを設定するよりも100px x 100pxの方がdivのサイズが10px x 10px(これは親のサイズの10%)になります。

あなたのdivの親サイズがあなたの望むものであることを確認してください。最も良い方法は、開発者ツールをブラウザに組み込むことです。

+0

%を使用するときはいつでも、私はいつも要素で開始し、それを100%に定義してから、そのすべてを定義する必要があります子孫? – CrazySynthax

+0

もちろんです。親は常にhtml要素であるとは限りません(実際には 'html'ではなく' body'をスタイルするべきではありません)。 Parentはdivを含む要素です。親のスタイルや位置はあなた次第です(例えば、身体の大きさなどに依存しない固定された位置に配置することができます)。 – Baumi

+0

私が定義したとき: "body {width:100%; height:100%}"、それは動作しませんでした。 "html。body {width:100%; height:100%}"と書いたときにだけ、赤い四角形が得られました。だから私はそれがタグで始まらなければならないことを意味すると思います。 – CrazySynthax

0

'%' ああ位置を必要とする:あなたは幅と高さとして%を使用したい場合は、この

<div style="position:absolute;background: red;table-layout: fixed;width:10%;height:10%;"></div>

0

を試してみてください。まず、pxでouther divが必要です。

Check this out: https://jsfiddle.net/JakubL/sjtcvwdr/ 

divのテスト、(自分の赤四角)のdivは192px高さと144pxの幅を持つことになりますので、外側のdivが1920px高さと1440px幅を有しています。

+0

理論的には、これはOPの質問に答えるかもしれませんが、サイトごとのルールごとにここにコードを投稿し、リンクをリファレンスまたはデモとして使用する必要があります。ここにあなたのコードを書いてください、またはこの投稿はすぐに削除されます – Danh

関連する問題