Jquery 如何使引导网格列跨越整个屏幕高度

我正在尝试为带有库的网页制作一个响应性“应用程序”屏幕。应用程序屏幕需要与页面匹配，而平板电脑屏幕基本上不需要。我在row元素中嵌套了div，它们使用flexbox，工作非常好（分配空间并适合包含的div）

我想让“行”元素（列m8和列m4）扩展并填充所有屏幕尺寸上的剩余屏幕空间。

---

是否有CSS修复程序，或者可以使用flexbox进行修复？

以下是一些可能对您有所帮助的内容

活样品

HTML

<div class="row">
    // Contents
</div>

JS

.row {
    background-color: #ccc;
}

//Gets the current height of the screen.
var screenHeight = $(window).height(); 
var row = $('.row');

// Assign that height to the .row
row.css({
    'height': screenHeight + 'px',
});

// This makes the div's height responsive when you resize the screen or the window of the browser.
$(window).resize(function () {
    screenHeight = $(window).height();
    row.css({
        'height': screenHeight + 'px',
    });
});

---

Live sample

您可能需要研究flex box解决方案，或者通过cssjQuery将列和所有父元素设置为最小高度：100%？如果你愿意，我会提供一个答案。@GreenFox是的。任何东西。你试过CSS3视口元素：vw，vh吗？请看我的答案，我希望它能对你有所帮助。谢谢。我刚才自己也试过，效果不错。

//Gets the current height of the screen.
var screenHeight = $(window).height(); 
var row = $('.row');

// Assign that height to the .row
row.css({
    'height': screenHeight + 'px',
});

// This makes the div's height responsive when you resize the screen or the window of the browser.
$(window).resize(function () {
    screenHeight = $(window).height();
    row.css({
        'height': screenHeight + 'px',
    });
});