如果内容超过高度，如何使 div 高度自动适合屏幕并展开答案

【问题标题】：How can I make a div height automatically fit screen and expands if the content exceeds height如果内容超过高度，如何使 div 高度自动适合屏幕并展开
【发布时间】：2015-02-01 23:36:21
【问题描述】：

在我的网页上，我有一个可以扩展（高度）以适应屏幕大小的 div。

这是我的 CSS：

.round-cornerapp {
      -webkit-border-radius: 5px 5px 5px 5px; 
      -moz-border-radius: 5px 5px 5px 5px;
      -o-border-radius: 5px 5px 5px 5px;
      border-radius: 5px 5px 5px 5px;
     background-color: #C2C2BD;
     height:100vh;
     padding-top: .5cm;

   }

如果内容扩展屏幕大小，我希望 div 自动调整。

我尝试了以下方法：

.round-cornerapp {
      -webkit-border-radius: 5px 5px 5px 5px; 
      -moz-border-radius: 5px 5px 5px 5px;
      -o-border-radius: 5px 5px 5px 5px;
      border-radius: 5px 5px 5px 5px;
     background-color: #C2C2BD;
     height:100vh;
     height:auto;
     padding-top: .5cm;

   }

除非我删除 height: 100vh ，否则高度不会自动扩展，此时高度不再适合屏幕，具体取决于 div 的内容。

如何使 Div 适合我的屏幕大小，即使是空的，并在添加 div 时自动扩展高度

【问题讨论】：

尝试使用百分比值作为高度（高度：50%；/*或任何合适的值*/）
你也可以试试 min-height: 100vh ，我想它会解决你的问题。
您的最后一条评论有效
@user1526912 我可以添加这个评论来回答吗？

标签： html css

【解决方案1】：

更具体地说，使用 jQuery，$(document).height() 函数。

$('.divFullScreen').height($(document).height());

否则，您也可以按如下方式使用 CSS。

.divFullScreen {
    min-height: 100vh;
}

PS：你的 div 的班级应该是 divFullScreen 才能工作。

【讨论】：