如何使div的高度达到浏览器窗口的100%

我有一个包含两列的布局-左div和右div。

右侧的div具有灰色背景色，我需要它根据用户浏览器窗口的高度垂直展开。现在，背景色结束于该分区中的最后一段内容。

我尝试过高度：100%，最小高度：100%；，等

当前回答

这是一个高度修正。

在CSS中使用：

#your-object: height: 100vh;

对于不支持vh单元的浏览器，请使用modernizr。

添加此脚本（为vh单元添加检测）

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {
        var height = parseInt(window.innerHeight/2, 10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"], 10);

        bool = !!(compStyle == height);
    });
    return bool;
});

最后，如果浏览器不支持vh单位，请使用此函数将视口的高度添加到#your object：

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height()) + 'px'});
    }
});

2013-08-21 16:57:21

其他回答

最简单：

html，正文{高度：100%；最小高度：100%；}正文{位置：相对；背景：紫色；边距：0；填充：0；}.全高{显示：块；位置：相对；背景：红色；高度：100%；宽度：300px；}<html class=“”><body><div class=“fullheight”>这是全高。</div></body></html>

2014-04-18 19:37:14

在这种情况下，可以使用vh，它是相对于视口高度的1%。。。

这意味着，如果你想掩盖高度，只需使用100vh。

请看下面我在这里为您绘制的图像：

尝试我为您创建的代码段，如下所示：

.左侧{高度：100vh；宽度：50%；背景色：灰色；浮动：左侧；}.对{高度：100vh；宽度：50%；背景色：红色；浮动：右侧；}<div class=“left”></div><div class=“right”></div>

2017-06-03 17:43:42

你需要做两件事，一是将高度设置为你已经做到的100%。第二个是将位置设置为绝对位置。这应该会奏效。

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

来源

2015-10-16 10:28:50

有几种方法可用于将＜div＞的高度设置为100%。

方法（A）：

html，正文{高度：100%；最小高度：100%；}.div左{高度：100%；宽度：50%；背景：绿色；}.div右{高度：100%；宽度：50%；背景：灰色；}<div class=“div left”></div><div class=“div right”></div>

方法（B）使用vh：

html，正文{高度：100%；最小高度：100%；}.div左{高度：100vh；宽度：50%；背景：绿色；浮动：左侧；}.div右{高度：100vh；宽度：50%；背景：灰色；浮动：右侧；}<div class=“div left”></div><div class=“div right”></div>

方法（c）使用挠性箱：

html，正文{高度：100%；最小高度：100%；}.包装器{高度：100%；最小高度：100%；显示：柔性；}.div左{宽度：50%；背景：绿色；}.div右{宽度：50%；背景：灰色；}<div class=“wrapper”><div class=“div left”></div><div class=“div right”></div></div>

2017-01-04 10:43:53

您可以在CSS中使用查看端口单元：

HTML格式：

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height: 100vh; /* vh stands for view-port height, and 1vh is 1% of screen height */
}

2016-05-04 11:11:58

如何使div的高度达到浏览器窗口的100%

推荐文章

最新文章

标签