content div始终采用css的屏幕高度为100％

我想要获得蓝色的红色和白色渐变填充屏幕的整个高度。目前，我在内容容器的两侧都有两个标记，所有标记都被主容器包围。

.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。欢迎任何帮助。预先感谢我在做错的建议。

来源

2017-02-14 tcoulson

假设'.container'是body'的'直接孩子，你可能还需要'html，body，.container {height：100％; ''但很难说没有看到你的其他代码。 –

尝试vh单位。

.container{ 
    min-height:100vh; 
}

来源

2017-02-14 04:49:49

是的，这是诀窍。谢谢。忘记视图高度。 – tcoulson

现在，也许你可以用

min-height: 100%;

在容器中的CSS

去，因为有在页面没有任何元素来覆盖高度。所以，最小高度应该为你做的工作！

来源

2017-02-14 04:45:56

尝试加入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>

来源

2017-02-14 04:50:00 prtdomingo

content div始终采用css的屏幕高度为100％

回答

相关问题