Expand div full height [closed]

问题:

I would like to expand the black box (id: column-content) to the full height without scroll bars.

I try alot of things but nothing works.

Here is the url: http://goo.gl/I5f0u59

Any idea? Thanks.

回答1:

You can use the viewport units vh and vw (viewport-height and viewport-width)

in your case:

#column-content
{
    height: 100vh;
    box-sizing: border-box;
    /* 
    change width, since we use border-box
    old width + padding
    */
    width: 480px; 
}

As you see, this will make your column content box-sizing:border-box this will prevent the container from becoming bigger than 100vh because of the padding-top and bottom. The content can still lead to an overflow. You will also have to set a new width, like shown above.

The support for this usecase is ok See here

回答2:

#column-content {
  bottom:0;
  position:fixed;
  top:0;
}