使div的高度达到屏幕的100％

Question

我有以下代码，我试图使div成为网页的完整高度。

HTML：

<div class="page-wrapper">

 <div class="vc_col-sm-6 wpb_column vc_column_container">
  Some content Goes Here
 </div>


<div>

CSS：

.page-wrapper {height：100％;}

.vc_col-sm-6 {身高：100％;背景：红色;}

Fiddle

Answer 1

.page-wrapper {height: 100%;}

.vc_col-sm-6 {height: 100vh;
    background: red;}

<div class="page-wrapper">
		
<div class="vc_col-sm-6 wpb_column vc_column_container">
	Some content Goes Here
	</div>
</div>

将高度设为

height: 100vh;

视口高度

Answer 2

您需要将html，body，.page-wrapper和内部元素的高度全部设为100％。

html,
body,
.page-wrapper,
.vc_column_container {
  height:100%;
}

Answer 3

  .page-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: grey;
  }

<div class="page-wrapper">

  <div class="vc_col-sm-6 wpb_column vc_column_container">
    Some content Goes Here
  </div>

  <div>