根据窗口大小动态调整html元素的大小[重复]答案

【问题标题】：Dynamically resize html elements based on window size [duplicate]根据窗口大小动态调整html元素的大小[重复]
【发布时间】：2020-10-06 00:29:51
【问题描述】：

所以我刚开始学习一些使用 HTML 和 CSS 的 Web 开发，最近我发现如果我决定在我的笔记本电脑上创建一个全尺寸的 Web 内容有一个 16 英寸的窗口，我无法获得与我的 24 英寸桌面显示器相同的视图。

这是一个例子。在下面的第一个屏幕截图中，我有一个 div，其中包含姓名和电话号码等下拉元素，以占据笔记本电脑上的页面高度。

在这里，您可以看到我将 div 的高度设置为大致占据网页的整个页面。但是，我注意到如果我用我的 24 英寸显示器打开这个 html 文档，我会得到以下信息：

因此我只是注意到，虽然我根据笔记本电脑的窗口制作了全高 div，但当我使用更大的 24 英寸显示器查看它时，它并不适用。任何人都可以帮助我，因为我希望 高度标准化，即使在更大的窗口上查看时，我最初希望它如何？

我的 HTML 代码如下：

* {
    margin: 0;
    padding: 0;
}

.outer_frame {
    position: relative;
    border: 1px solid black;
}

.inner_frame {
    border: 1px solid black;
    height: 745px;
    width: 700px;
}

<!DOCTYPE html>

<div class = "outer_frame">
    <div class = "inner_frame">
        <label id = "name">Name</label>
        <input type = "text" id = "name_in" disabled class = "field">
        <label id = "tel">Telephone Number</label>
        <input type = "text" id = "tel_in" disabled class = "field">
    </div>
</div>

【问题讨论】：

这能回答你的问题吗？ DIV height set as percentage of screen?

标签： html css

【解决方案1】：

尝试在不使用固定高度的情况下添加计算高度。使用视口高度，以便它采用设备的自动高度。只需将height: calc(100vh - 10px); 添加到您的inner_frame

* {
    margin: 0;
    padding: 0;
}

.outer_frame {
    position: relative;
    border: 1px solid black;
}

.inner_frame {
    border: 1px solid black;
    height: calc(100vh - 10px);
    width: 700px;
}

<!DOCTYPE html>

<div class = "outer_frame">
    <div class = "inner_frame">
        <label id = "name">Name</label>
        <input type = "text" id = "name_in" disabled class = "field">
        <label id = "tel">Telephone Number</label>
        <input type = "text" id = "tel_in" disabled class = "field">
    </div>
</div>

【讨论】：

【解决方案2】：

您可以使用“%”、“vh”或“em”代替“px”进行测量。但是您应该针对不同的屏幕尺寸使用媒体查询。

例如

height: 90%;
width: 100em;

【讨论】：