放大DIV标签

时间:2012-03-23 11:04:48

标签: css html height

昨天我问了一个问题How to make text vertically and horizontally center in an HTML page,关于在页面中间(垂直和水平)居中文本的方法。

解决方案工作正常,但现在我想增加文本大小,但问题是我不想使用'px'之类的单位度量,因为它是一种静态方式,无法适应所有屏幕尺寸

因此,我想使用文本的百分比单位度量。

HTML code:

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

我面临的困难是<div />的高度。我不能将div的高度等于body的高度,宽度相等,因为div是块元素,但我如何将div的高度等于到body的高度?

我已尝试将paddingmargin设为0,将height设为100%,但无效。

任何人都可以帮助我吗?

2 个答案:

答案 0 :(得分:1)

我认为这就是你所需要的:

<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%不会根据容器的高度或宽度缩放文本,但会根据当前文本大小进行缩放。

请参阅css font units

您可以使用javascript实现您想要的效果。不过我建议你不要这样做。让用户决定是否需要放大/缩放。

干杯!

答案 1 :(得分:0)

它有效,但问题是身体没有填充视口的高度。添加它:

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

jsFiddle with your original code.