Reputation: 1849
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?
Upvotes: 0
Views: 2041
Reputation: 2388
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!
Upvotes: 1
Reputation: 19012
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.
Upvotes: 0