如何使div高度自动适合屏幕，如果内容超过高度，则展开 [英] How can I make a div height automatically fit screen and expands if the content exceeds height

问题描述

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

On my web page I have a div that expands(height) to fit the size of the screen.

这是我的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的内容，高度不再适合屏幕。

The height does not extend automatically with the above unless I remove height: 100vh at which point the height no longer fits the screen depending on the content of the div.

如何使Div适合屏幕尺寸

How can I make the Div fit the size of my screen even when empty and automatically expands in height as divs are added

推荐答案

更具体地使用jQuery， $ ）.height（） function。

Use jQuery more specifically, the $(document).height() function.

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

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

Otherwise, you could also use CSS as follows.

.divFullScreen {
    min-height: 100vh;
}

PS： div 的类应该 divFullScreen ，这样才能工作。

PS: your div's class should be divFullScreen for this to work.

这篇关于如何使div高度自动适合屏幕，如果内容超过高度，则展开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！