我想知道如何制作一个可调整的 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>
最佳答案
你可以试试这个让 div 拉伸(stretch)到屏幕上:
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
(链接是一个重复的问题，但在我看来有一个更容易理解的答案)。
关于javascript - 文本的可调 Div 容器(放大和缩小)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12870029/