100vw=视口宽度的100%。

100vh=视口高度的100%。

如果要将div宽度或高度设置为浏览器窗口大小的100%，应使用：

宽度：100vw

高度：100vh

或者，如果您想将其设置得更小，请使用CSS calc函数。例子：

#example {
    width: calc(100vw - 32px)
}

尝试在身体上使用“height:100%”。

有几种方法可用于将＜div＞的高度设置为100%。

方法（A）：

html，正文{高度：100%；最小高度：100%；}.div左{高度：100%；宽度：50%；背景：绿色；}.div右{高度：100%；宽度：50%；背景：灰色；}<div class=“div left”></div><div class=“div right”></div>

方法（B）使用vh：

html，正文{高度：100%；最小高度：100%；}.div左{高度：100vh；宽度：50%；背景：绿色；浮动：左侧；}.div右{高度：100vh；宽度：50%；背景：灰色；浮动：右侧；}<div class=“div left”></div><div class=“div right”></div>

方法（c）使用挠性箱：

html，正文{高度：100%；最小高度：100%；}.包装器{高度：100%；最小高度：100%；显示：柔性；}.div左{宽度：50%；背景：绿色；}.div右{宽度：50%；背景：灰色；}<div class=“wrapper”><div class=“div left”></div><div class=“div right”></div></div>

您可以使用以下CSS使div达到浏览器窗口高度的100%：

display: block;
position: relative;
bottom: 0;
height: 100%;

非常简单的解决方案，支持跨域，还支持浏览器重新调整大小。

<div style="height: 100vh;">
   <iframe src="..." width="100%" height="80%"></iframe>
</div>

根据需要调整iframe高度属性（将div高度属性保留为100vh）。

为什么80%？在我的真实场景中，我在div中的iframe之前有一个标头，这会占用一些垂直空间-因此我将iframe设置为使用80%而不是100%（否则它将是包含div的高度，但从标头之后开始，并溢出div的底部）。

尽管这个解决方案是用jQuery完成的，但我认为它可能对任何人来说都是有用的，因为任何人都可以根据屏幕大小制作列。

对于从页面顶部开始的列，此解决方案是最简单的。

body, html {
  height: 100%;
}

div#right {
  height: 100%
}

对于不从页面顶部开始的列（例如：如果它们从页眉下方开始）。

<script>
     $(document).ready(function () {
         var column_height = $("body").height();
         column_height = column_height - 100; // 100 is the header height
         column_height = column_height + "px";
         $("#column").css("height",column_height);
    });
</script>

第一种方法将主体高度应用于它和列，这意味着starting_pixels+height100%。

第二种方法通过获取正文的高度来获取显示给用户的页面高度，然后减去页眉大小，以了解显示该列的剩余高度。