how do I set height of container DIV to 100% of wi

问题:

I have a couple of problems with my container DIV. For one it is not recognising the height of my content correctly (I would have thought it would extend beyond the bottom of the main content and sidebar, but it isn't). You can see what I mean on this page.

I would also like the container DIV to always fill the available height of the screen/window. I have tried setting it to min-height:100%, but this didn't have any effect.

Here is the CSS I am using for the container DIV:

#container {
  padding: 0;
  margin: 0;
  background-color: #292929;
  width: 1200px;
  margin: 0 auto;
  min-height: 100%;
}

I would be grateful for any help to get this working.

Thanks,

Nick

回答1:

Add this to your css:

html, body {
    height:100%;
}

If you say height:100%, you mean '100% of the parent element'. If the parent element has no specified height, nothing will happen. You only set 100% on body, but you also need to add it to html.

回答2:

Did you set the CSS:

html, body
{
    height: 100%;
}

You need this to be able to make the div take up all the space. :)

回答3:

You can net set it to view height

html, body
{
    height: 100vh;
}

回答4:

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
}

The html height (%) will take care of the height of the documents that's height is more than a 100% of the screen view while the body view height (vh) will take care of the document's height that is less than the height of the screen view.