Enlarge DIV tag

2019-09-12 14:42发布

站内文章 / HTML/CSS
11 0 0

问题:

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?

回答1:

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!



回答2:

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.



标签： css html height
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~