容器无法容纳屏幕的100％

Question

I am trying to have a typical forum look to my website but the container of my content won't fit to 100% of my page height.

I have tried using height: 100vh; and all the others I can find.

My CSS is

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

This is my webpage, with vertical overflow

Answer 1

If you add 100% height to the body & html and min-height: 100% to the container you'll be good to go (unless I've misunderstood the question).

body, html {
    height: 100%;
}

.container {
    min-height: 100%;
}

Full code example: https://codepen.io/raptorkraine/pen/ZKZeLz

Answer 2

Another approach

Create a wrapper with it's own id or class and set it with these css properties:

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

This content will never scroll though.

Example fiddle

Answer 3

From my experience, you should want the page to be at least 100% height, but still increase if more content are added.

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

Here I use min-height: 100vh instead of min-height: 100% because otherwise the body will not take 100%, because the parent needs a fixed height for that.

Then, when you want a full screen container, don't try with height: 100% , you can create a helper class for that:

.vh-100{
    height: 100vh;
}