css - content div 始终使用 css 占据 100% 的屏幕高度

Question

我有以下网页。

我正在尝试让蓝红白渐变填充整个屏幕高度。目前我在内容容器的两侧都有两个标志，它们都被一个主容器包围。

.container{
  width: 100%;
  background: -webkit-linear-gradient( $blueToRed); 
  background: -o-linear-gradient($blueToRed);
  background: -moz-linear-gradient($blueToRed); 
  background: linear-gradient($blueToRed);
   margin-bottom: -99999px;
  padding-bottom: 99999px;
  overflow: auto;
}

在firstContain里面

.firstContain{
  border-left: 4px solid white;
  border-right: 4px solid white;
  background: #FFF;
  max-width: 980px;
  position: relative;
  display: block;
  margin: 0 auto;
  overflow: auto;
  z-index:1000;
}

我试图让 contain 的高度达到 100%，但我添加了它但它没有移动。我认为 99999 边距填充技巧会起作用，它确实起作用了，但后来我丢失了一些使它起作用的 css。欢迎任何帮助。预先感谢您对我做错了什么的建议。

Answer 1

试试 vh 单位。

.container{
    min-height:100vh;
}