Html 调整视图端口大小时垂直调整Div大小

更改视图端口时，我试图垂直调整Div（包含内容）的大小。我想根据垂直增加或减少窗口大小来更改div（带内容）的大小

目前，我正在通过为包装器div提供一个固定大小并为auto提供溢出来完成这项工作，所以当屏幕垂直调整大小时，它将为div提供滚动

有没有一种方法可以使我的div（含内容）随着屏幕尺寸的垂直减小而自动缩小到高度

HTML框架

*{
框大小：边框框；
}
正文，html{
身高：100%；
}
.集装箱{
身高：100%；
边框：1px实心#bbb；
}
.页脚{
位置：固定；
底部：0px；
文本对齐：居中；
高度：25px；
}
.覆盖{
边框：1px纯蓝色；
}
.内容{
身高：100%
}
.包装纸{
高度：计算（100%-100px）；
溢出：自动；
}

系统仪表板
第一包装
第一包装
第一包装
第一包装
第一包装
第一包装
第一个包装器第一个包装器第一个包装器第一个包装器第一个包装器
第一个包装器第一个包装器第一个包装器第一个包装器第一个包装器
第一个包装器第一个包装器第一个包装器第一个包装器第一个包装器
第一个包装器第一个包装器第一个包装器第一个包装器第一个包装器
第一个包装器第一个包装器第一个包装器第一个包装器第一个包装器
第一个包装器第一个包装器第一个包装器第一个包装器第一个包装器
版权所有

您可以使用

高度：100vh

其中VH是视口高度

您可以使用

高度：100vh

其中VH是视口高度

尝试向calc函数添加供应商前缀：

-moz calc

和

-webkit calc

---

尝试向calc函数添加供应商前缀：

-moz-calc

和

-webkit-calc

---

如果我理解正确，您正在寻找行为类似的东西。你必须

将

height:100%

设置为

html

和

body

以及您的

div

使您的div

溢出：auto

代码片段只是模拟高度调整大小。请参阅小提琴的实际演示

$（“#按钮”）。单击（函数（）{
$（'#b'）.append（'First wrapper
'）；
});
$（“#重置”）。单击（函数（）{
$（'#b'）.empty（）；
});
html，正文{
身高：100%；
背景：绿色；
填充：0；
保证金：0；
}
身体{
填充：20px；
框大小：边框框；
}
#a{
身高：100%；
背景：红色；
溢出：自动；
填充：50px；
框大小：边框框；
}

添加更多内容以模拟浏览器高度
重置

第一个包装器

第一个包装器

如果我理解正确，您正在寻找行为类似的东西。你必须

将
height:100%
设置为
html
和
body
以及您的
div
使您的div
溢出：auto
代码片段只是模拟高度调整大小。请参阅小提琴的实际演示


$（“#按钮”）。单击（函数（）{
$（'#b'）.append（'First wrapper
'）；
});
$（“#重置”）。单击（函数（）{
$（'#b'）.empty（）；
});
html，正文{
身高：100%；
背景：绿色；
填充：0；
保证金：0；
}
身体{
填充：20px；
框大小：边框框；
}
#a{
身高：100%；
背景：红色；
溢出：自动；
填充：50px；
框大小：边框框；
}

添加更多内容以模拟浏览器高度
重置

第一个包装器

第一个包装器

看起来像是以下人员的工作：

jsiddle演示：
看起来像是以下人员的工作：

jsiddle演示：
计算函数可以工作，但需要删除减号周围的空格。您可以使用
vh
单位获取视口高度：
高度：计算（100vh-100px）


*{
框大小：边框框；
}
.集装箱{
边框：1px实心#bbb；
}
.页脚{
位置：固定；
底部：0px；
文本对齐：居中；
高度：25px；
}
.覆盖{
边框：1px纯蓝色；
}
.包装纸{
高度：计算（100vh-100px）；
溢出：自动；
}

系统仪表板
第一包装
第一包装
第一包装
第一包装
第一包装
第一包装
第一个包装器第一个包装器第一个包装器第一个包装器第一个包装器
第一个包装器第一个包装器第一个包装器第一个包装器第一个包装器
第一个包装器第一个包装器第一个包装器第一个包装器第一个包装器
第一个包装器第一个包装器第一个包装器第一个包装器第一个包装器
第一个包装器第一个包装器第一个包装器第一个包装器第一个包装器
第一个包装器第一个包装器第一个包装器第一个包装器第一个包装器
版权所有
计算功能将起作用，但您需要删除减号周围的空格。您可以使用
vh
单位获取视口高度：
高度：计算（100vh-100px）


*{
框大小：边框框；
}
.集装箱{
边框：1px实心#bbb；
}
.页脚{
位置：固定；
底部：0px；
文本对齐：居中；
高度：25px；
}
.覆盖{
边框：1px纯蓝色；
}
.包装纸{
高度：计算（100vh-100px）；
溢出：自动；
}

系统仪表板
第一包装
第一包装
第一包装
第一包装
第一包装
第一包装
第一个包装器第一个包装器第一个包装器第一个包装器第一个包装器
第一个包装器第一个包装器第一个包装器第一个包装器第一个包装器
第一个包装器第一个包装器第一个包装器第一个包装器第一个包装器
第一个包装器第一个包装器第一个包装器第一个包装器
 body {
   height: 100vh;
   padding: 0;
   margin: 0;
 }

 .container {
   height: 100%;
   border: 1px solid #bbb;
 }

 .page-header {
   display: block;
 }

 .content {
   display: flex;
   flex-direction: column;
   height: 100%;
 }

 .wrapper {
   width: 100%;
   height: 100%;
   overflow: auto;
 }

 .override {
   border: 1px solid blue;
   height: 100%;
   overflow: auto;
 }

 .footer {
   text-align: center;
   height: 25px;
 }