Question

在我的网页上，我有一个扩展（高度）的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;

   }

除非我移除高度：100vh，高度不会自动延伸，高度不再适合屏幕，具体取决于div的内容。

即使在空的情况下，如何使Div适合我的屏幕尺寸，并在添加div时自动扩展高度

Answer 1

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

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

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

.divFullScreen {
    min-height: 100vh;
}

PS：您的div课程应该divFullScreen才能生效。

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

1 个答案: