Html 是否可以在不使用JavaScript的情况下在重新调整窗口大小时重新调整div的大小？

在我的例子中，当视口的高度达到450px时，我需要设置div的大小

基本上，

#面板容器

应该随着用户缩小浏览器窗口而缩小，使div在视口中始终可见

我想知道，如果不使用JS，只使用CSS，是否有可能达到这个效果。 我知道CSS媒体查询，但我需要在用户重新调整窗口大小时重新调整大小

我可以使用最新的浏览器以及HTML5和CSS3功能。 任何想法都欢迎

window.app={
开始：函数（）{}
};
正文{
背景色：深蓝色；
}
#标题{
位置：固定；
排名：0；
左：0；
宽度：100%；
高度：50px；
背景颜色：浅灰色；
}
#面板包装{
位置：固定；
顶部：50px；
左：0；
身高：100%；
背景色：软呢帽；
}
#面板容器{
宽度：200px；
高度：400px；
溢出：自动；
}

建设者
标题
标题
一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里。这里有一些长文本，这里有一些长文本，这里有一些长文本，一些长文本
文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里。这里有一些长文本，这里有一些长文本，这里有一些长文本，这里有一些长文本，这里有一些长文本，这里有一些长文本，一些长文本
文本在这里，一些长文本在这里，一些长文本在这里。一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里。一些长的
文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里。这里有一些长文本，这里有一些长文本，这里有一些长文本，一些长文本
文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里。这里有一些长文本，这里有一些长文本，这里有一些长文本，这里有一些长文本，这里有一些长文本，这里有一些长文本，一些长文本
文本在这里，一些长文本在这里，一些长文本在这里。一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里。一些长的
文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里。这里有一些长文本，这里有一些长文本，这里有一些长文本，一些长文本
文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里。这里有一些长文本，这里有一些长文本，这里有一些长文本，这里有一些长文本，这里有一些长文本，这里有一些长文本，一些长文本
文本在这里，一些长文本在这里，一些长文本在这里。一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里。一些长的
文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里。这里有一些长文本，这里有一些长文本，这里有一些长文本，一些长文本
文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里，一些长文本在这里。这里有一些长文本，这里有一些长文本，这里有一些长文本，这里有一些长文本，这里有一些长文本，这里有一些长文本，一些长文本
文本在这里，一些长文本在这里，一些长文本在这里。
您可以使用CSS3媒体查询进行此操作

比如：

@介质（最大宽度：600px）{
div#你的div{
宽度：100px；
}
}
您可以通过使用
calc
将
div
的高度设置为视口高度的100%，减去页眉的高度，然后将其
最大高度设置为
400px
（或任何您需要的高度）








下面是一个简单的例子：


*{框大小：边框框；}
html{高度：100%；}
正文{高度：200%；边距：0；}
div{
背景：#ccc；
高度：计算（100vh-50px）；
最大高度：300px；
字体系列：arial；
左：0；
溢出：自动；
填充物：5px；
位置：固定；
顶部：50px；
宽度：25%；
}
Lorem ipsum door sit amet，一位杰出的领导者。酒醉后喝啤酒，喝啤酒。杜伊斯·维塔·乌纳·埃尼姆。CRA在口述门前排卵。克拉斯·普莱瑟拉特·多洛·奥古斯，在《发酵之王》中。埃尼安·杜伊·麦格纳（Aenean dui magna），法雷特拉·欧盟东部，帕特·莫莱斯蒂·自由党（Pat molestie libero）。这是佩伦茨克的名言，也是欧盟的名言。这是一个不真实的名字，例如Suspendisse scelerisque sem odio，坐在阿梅特·法雷特拉·维韦拉的座位上。Ut孕妇凝乳芸香。维利特·拉奥里特的普罗因，维尼纳提斯·莫里斯·维塔，调味品莱克图斯。您必须遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他有关法律法规

以百分比形式使用div的宽度，例如80%。根据窗口宽度，div的宽度将根据浏览器宽度减少或增加

解决方案2：

如果上述选项失败，请使用媒体查询

@media (max-width : 900px) and (min-width: 500px)
{
  div{
       width:200px;
    }
}

 @media (max-width : 400px) and (min-width: 500px)
{
  div{
       width:100px;
    }
}

在ccs中使用@media，在html页面中使用@@media我不确定这个解决方案有多理想，但它确实能达到您想要的效果

#panel-wrapper {
            position: fixed;
            width: -moz-calc(100% - 80%);
            width: -webkit-calc(100% - 80%);
            width: -o-calc(100% - 80%);
            width: calc(100% - 80%);
            z-index: 10;
            padding-right: 80%;
            top: 50px;
            left: 0;
            height: 100%;
        }

        #panel-container {
            width: 100%;
            height: 400px;
            overflow: auto;
            background-color: moccasin;
        }

以上是我根据您的代码修改的内容
我将仅用一行回答此问题
使用大众汽车代替px，一切都将成为一个好主意