logo标签列表

使用CSS让内容div始终占据屏幕高度100%。

css
3
我有一个网页如下图所示。 enter image description here 我想让蓝、红、白三种颜色的渐变填满整个屏幕高度。目前，我在内容容器的两侧放置了两个旗帜，它们都被一个主容器包围着。
.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的margin padding 技巧，它确实起作用了，但我失去了一些让它工作的css。欢迎任何帮助。提前感谢您对我做错的建议。

假设.container是body的直接子元素，你可能还需要添加html,body,.container { height: 100%; }。但是如果没有看到你代码的其他部分，很难确定。 - undefined
3个回答
17

尝试使用vh单位。

.container{
    min-height:100vh;
}
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>

0

目前，也许你可以选择

min-height: 100%;

在你的容器CSS中，由于页面中没有元素来覆盖高度。所以，使用min-height应该能解决你的问题！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接