容器不适合100％的屏幕

Question

我想在我的网站上找一个典型的论坛，但我的内容容器不适合我的页面高度的100％。

我尝试过使用height: 100vh;以及我能找到的所有其他人。

我的CSS是

body {
  font-family: Verdanna, Arial, Helvetica, sans-serif;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #f2efe8;
  margin-right: auto;
  margin-left: auto;
  font-size: 20px;
  background-image: url("../resources/bokeh.jpg");
  background-size: cover;
  padding: 0 10px 0 10px;
  height: 100%;
  min-height: 100%;
  margin: 0;
}

header {
  font-family: Verdanna, Arial, Helvetica, sans-serif;
  text-align: center;
  font-weight: 700;
  padding: 4px;
  background: rgba(0, 0, 0, 0.2);
}

div.container {
  width: 1000px;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.3);
  top: 0;
  bottom: 0;
}

这是我的网页，垂直溢出

Answer 1

如果您在身体和身体上增加100％的身高。 html和min-height：100％到你容易去的容器（除非我误解了这个问题）。

body, html {
    height: 100%;
}

.container {
    min-height: 100%;
}

完整代码示例：https://codepen.io/raptorkraine/pen/ZKZeLz

Answer 2

另一种方法

使用它自己的id或类创建一个包装器并使用这些css属性设置它：

.background {
   position:fixed;
   top:0;
   right:0;
   bottom:0;
   left:0;
   background-repeat: no-repeat;
   background-attachment: fixed;
   color: #f2efe8;
   background-image: url("../resources/bokeh.jpg");
   background-size: cover;
   z-index:-1;
}

此内容永远不会滚动。

Example fiddle

Answer 3

根据我的经验，您应该希望页面的高度至少为100％，但如果添加更多内容，页面仍会增加。

html, body{
  height: auto; /* This is applied by default, so it's not necessary to define it */
  min-height: 100vh;
}

在这里，我使用min-height: 100vh代替min-height: 100%，否则身体将不会占用100％，因为父母需要一个固定的高度。

然后，当你想要一个全屏容器时，不要试试height: 100%，你可以为它创建一个帮助类：

.vh-100{
    height: 100vh;
}