Question

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

Answer 1

您可以尝试将此拉伸到屏幕：

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

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

用于文本的可调节Div容器（放大和缩小）

1 个答案: