文本的可调整 Div 容器（放大和缩小）答案

【问题标题】：Adjustable Div Container for Text (Zoom in and Zoom out)文本的可调整 Div 容器（放大和缩小）
【发布时间】：2012-10-13 04:44:28
【问题描述】：

我想知道如何制作一个可调整的 div 容器，它可以根据笔记本电脑、上网本或台式机中显示的屏幕调整自己的宽度和高度。必须确保没有文本在其容器下方或溢出其容器，并且容器内不会留下空白。

我尝试使用 % 或 em，但由于它基于基本字体大小 16px，因此在较小的上网本屏幕中会出现文本溢出或在较大屏幕的桌面中容器底部留下空白的情况。

任何建议将不胜感激。

<style type="text/css">
    .tt
    {
        border: 2px solid red;
        height: 80px;
        width: 168px;
        font-size: 16px;
        padding: 0px;
    }

</style>
</head>

<body>
    <div class="tt">
        Hello World Hello World<br>
        Hello World Hello World<br>
        Hello World Hello World<br>
        Hello World Hello World<br>
    </div>
</body>

【问题讨论】：

不知道你在问什么 - 你想要一个总是 100% 浏览器窗口宽度和高度的 div 吗？

标签： javascript html css

【解决方案1】：

你可以试试这个让 div 拉伸到屏幕上：

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

.tt
{
    border:2px solid red;
    font-size:16px;

    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
}

请注意，box-sizing 是 CSS3 属性。如果不想使用，可以去掉 div 的边框，或者使用表格（已弃用）。

您还需要用文本填充孔屏幕吗？在这种情况下，这将很有用：CSS: Set font to a size so the text would occupy whole container

（链接是重复的问题，但在我看来有一个更容易理解的答案）。

【讨论】：