0

我想知道如何制作一个可调节的 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>
4

1 回答 1

0

您可以尝试这样做以使 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：将字体设置为一个大小，以便文本占据整个容器

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

于 2012-10-13T05:11:20.047 回答