Enlarge DIV tag

Question

Yesterday I asked the question How to make text vertically and horizontally center in an HTML page, regarding a way to center text in the middle of a page (vertical and horizontal).

The solution works fine, but now I want to increase the text size, but the problem is that I do not want to use the 'px' like unit measure, because is a static way and could not adapt to all screen sizes.

I therefore want to use the percentage unit measure for text.

HTML code:

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

The difficulty I am facing is with the height of the <div />. I cannot put the height of the div equal to the height of the body, the width is equal because the div is a block element, but how I put the height of the div equal to the height of the body?

I already tried to put the padding and margin as 0 and the height to 100% but nothing works.

Can anyone help me?

Ehm, in the code in the accepted post from yesterday the height of the `div` is 100%... See http://jsfiddle.net/Mikey/2mgMy/ — Frank van Wijk, Mar 23 '12 at 11:12
What is 100% is the height of the body. If i clear the display : table and display : table-cell from the div properties , i realize that the DIV takes the same height from the parent element, in this case the BODY.So i can increase the height of a element that have display property set to table-cell ? — tt0686, Mar 23 '12 at 11:13

Boris D. Teoharov · Accepted Answer · 2012-03-23T13:53:37.950

I think this is what you need :

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

See it in action : 100% height

However if you want to "adapt" your text "to all screen sizes" there is a catch. Percentage and EM units used with font-size do exactly the same (at least in theory, although % are better in terms of compatibility) - they scale text based on its actual size in pixels. In other words font-size:xx% does not scale text based on its container height or width but based on current text size.

See css font units

You could achieve what you want by using javascript. However I recommend you not do it. Let user decide if he needs magnification/zoom.

Cheers!

Supr · Answer 2 · 2012-03-23T11:28:36.437

0

It works, but the problem is that the body isn't filling the height of the viewport. Add this as well:

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

jsFiddle with your original code.

edited Mar 23 '12 at 11:28

answered Mar 23 '12 at 11:12

Supr

18,572
3
31
36

Thanks for the quick answer :) If you look to the code in the link , you will see that i already have those properties defined to the body element. – tt0686 Mar 23 '12 at 11:20
Your original code appears to work in jsfiddle in Opera, see the link I'm adding to the post. Could you show the actual code you are using? Make sure any containers between `.my-block` and the body also has height set to 100%. – Supr Mar 23 '12 at 11:28
i tried to take of the display : table property from the BODY element and the display : table-cell property from the DIV and the DIV takes the same height from the BODY element, but the text no longer stayed centered. So my question is , how can i put the same height in an element that is using the display: table-cell property ? – tt0686 Mar 23 '12 at 11:31
Isn't it already the same height though, in the jsFiddle? What precisely is wrong with the demo as it is now? – Supr Mar 23 '12 at 11:34
In the link that you give try to put in the css div properties font-size = 100px; This will work fine , but instead if put 100% the text will not change. I do not want to use the pixel unit measurement because is static, bu the percentage unit measure does not work because the height of the DIV is no the same of the BODY element and you can see that if you use the developers tool from Chrome. You will see that the DIV height is very small – tt0686 Mar 23 '12 at 11:40
`font-size: 100%` means that the font size should be 100% of the inherited `font-size`. It has nothing to do with the size of the container. Try `200%` or `2em`; thouse should be twice the size. I am not aware of any pure CSS way to set the font-size relative to the container. – Supr Mar 23 '12 at 11:55
The DIV height is just big enough to contain the text. If you increase the font-size, then the container grows automatically. – Supr Mar 23 '12 at 11:58

Enlarge DIV tag

2 Answers2

Linked