展开 div 全高 [英] Expand div full height

问题描述

我想在没有滚动条的情况下将黑框(id:column-content)扩展到全高.

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.

这是网址:http://goo.gl/I5f0u59

有什么想法吗?谢谢.

推荐答案

您可以使用 视口单位 vh 和 vw(视口高度和视口宽度)

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

在你的情况下:

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

如您所见，这将使您的列内容 box-sizing:border-box 由于 padding-top，这将防止容器变得大于 100vh和底部.内容仍然可能导致溢出.您还必须设置一个新的宽度，如上所示.

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

这篇关于展开 div 全高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！