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;
}

我试图控制到100％的高度，但我添加它并且它不会移动。我认为99999的边距填充技巧会起作用，但确实如此，但后来我失去了一些使其工作的CSS。欢迎任何帮助。提前感谢我在做错的建议。

Answer 1

尝试vh单位。

.container{
    min-height:100vh;
}

Answer 2

尝试在您的height: 100%中添加html, body, .container，如下所示：

html, body, .container {
    height: 100%;
}

.container {
  border-left: 4px solid white;
  border-right: 4px solid white;
  background: #333;
  max-width: 980px;
  position: relative;
  display: block;
  margin: 0 auto;
  overflow: auto;
  z-index:1000;
}

<html>
    <head>
    </head>
    <body>
        <header></header>
        <div class="container">
          <p>Website Content</p>
        </div>
        <footer></footer>
    </body>
</html>

Answer 3

现在，也许你可以选择

min-height: 100%;

在容器css中，因为页面中没有元素可以覆盖高度。所以，min-height应该为你工作！

内容div总是用css取100％的屏幕高度

3 个答案: