设置 div 高度等于屏幕大小 [英] Set div height equal to screen size

问题描述

我在 twitter-bootstrap 中有一个 div 元素，它的内容会垂直溢出屏幕外.

我希望 div 占据浏览器窗口大小的高度，并让其余内容在窗口内垂直滚动.

我有一个不工作的示例@jsFiddle

#content {边框:1px 实心 #000；溢出-y:自动；高度:100%；}<div class="container-fluid"><div class="row-fluid"><div class="span3">侧边栏</div><div class="span9" id="content">内容栏示例内容

我在阅读了诸如 SO 问题

编辑--

对不起，我想我的问题错了.

我想要的是我的 div 必须填满屏幕中剩余的垂直空间.

如果有人可以提出响应式解决方案，那就太好了

解决方案

Using CSS {height: 100%;} 匹配父级的高度.这可以是任何东西，意味着比屏幕小或大.使用 {height: 100vh;} 匹配视口的高度.

.container {高度:100vh；溢出:自动；}

根据Mozilla的官方文档，1vh为:

<块引用>

等于视口初始包含块高度的 1%.

I have a div element in twitter-bootstrap which will have content that will overflow vertically outside the screen.

I would like the div to take the height of the size of the browser window and let the rest of the content scroll vertically within the window.

I have a sample that is not working @jsFiddle

#content {
    border: 1px solid #000;
    overflow-y:auto;
    height:100%;
}

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">Side Bar</div>

        <div class="span9" id="content">
            Content Bar Example Content
        </div>
    </div>
</div>

I am posting this question after reading so questions like SO Questions

EDIT--

Sorry guys I guess I got my question wrong.

What I would like is that my div must fill the rest of the vertical space in the screen.

It would be great if someone can suggest a responsive solution

解决方案

Using CSS {height: 100%;} matches the height of the parent. This could be anything, meaning smaller or bigger than the screen. Using {height: 100vh;} matches the height of the viewport.

.container {
    height: 100vh;
    overflow: auto;
}

According to Mozilla's official documents, 1vh is:

Equal to 1% of the height of the viewport's initial containing block.

这篇关于设置 div 高度等于屏幕大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！