DIVタグを拡大

昨日私は質問をHow to make text vertically and horizontally center in an HTML pageに書いて、ページの真ん中（縦と横）にテキストを配置する方法について質問しました。DIVタグを拡大

解決策はうまくいきましたが、今ではテキストサイズを増やしたいのですが、問題は静的な方法ですべての画面に適応できないため、単位尺度のような 'px'を使用したくないということですサイズ。

したがって、テキストのパーセンテージ単位を使用します。

HTMLコード：

<body> 
    <div class="my-block"> 
     WORD1<br /> 
     WORDWORDWORDWORD2 
    </div> 
</body>

私が直面しています難易度は<div />の高さです。私はdivの高さをbodyの高さと同じにすることはできません。divはブロック要素なので幅は同じですが、bodyの高さに等しいdivの高さをどう入れますか？

私はすでに100%に0とheightとしてpaddingとmarginを入れてみましたが、何も働きません。

誰でも手伝ってもらえますか？

出典

2012-03-23 tt0686

EHM、昨日から受け入れポスト内のコードで 'div'の高さはは100％高さがどのようなものですhttp://jsfiddle.net/Mikey/2mgMy/ –

見る100％体の。 DIVがDIVのプロパティからtable：displayとtable：cellの表示をクリアすると、DIVが親要素から同じ高さを取ることがわかります。この場合はBODY.Soを持つ要素の高さを増やすことができます表示プロパティはtable-cellに設定されていますか？ – tt0686

私は、これは何が必要だと思う：

<style type="text/css"> 
html {height: 100%;} 
body {margin: 0;padding: 0;height: 100%;} 
.my-block {height:100%;} 
</style>

は、アクションでそれを参照してください。100% height

しかしあなたは "適応" したい場合あなたのテキストを「すべての画面サイズに」キャッチがあります。 font-sizeで使用されるパーセンテージとEM単位は全く同じです（少なくとも理論的には％は互換性の面で優れていますが）。実際のサイズ（ピクセル単位）に基づいてテキストを拡大/縮小します。言い換えれば、font-size：xx％は、コンテナの高さや幅に基づいてテキストをスケールするのではなく、現在のテキストサイズに基づいています。

は、あなたはJavaScriptを使用して欲しいものを達成できるcss font units

を参照してください。しかし、私はそれをしないことをお勧めします。ユーザーが拡大/拡大が必要かどうかを決定させます。

乾杯！

出典

2012-03-23 12:28:20

問題は、ボディがビューポートの高さを満たしていないことです。同様にこれを追加します。

html,body{ 
    margin: 0; 
    padding: 0; 
    height: 100%; 
}

jsFiddle with your original code.

出典

2012-03-23 11:12:42 Supr

クイックアンサーありがとう:) リンクのコードを見ると、body要素に定義されているプロパティが既にあることがわかります。 – tt0686

元のコードがOperaのjsfiddleで動作するように見えますが、投稿に追加しているリンクを参照してください。使用している実際のコードを表示できますか？ 'の間にコンテナがあることを確認してください。my-block'となり、ボディの高さも100％に設定されています。 – Supr

私はBODY要素のdisplay：tableプロパティとDIVのdisplay：table-cellプロパティを取ろうとしましたが、DIVはBODY要素と同じ高さをとりますが、テキストはもはや中央に置かれなくなりました。だから私の質問は、私はどのように表示を使用している要素に同じ高さを置くことができます：テーブル - セルのプロパティですか？ – tt0686

答えて

関連する問題