Question

我有一个70px的导航栏，在导航栏下面我将有3列堆叠在一起。我试图找出一种方法使列全部相等的高度。基本上是这样的：

if (_IsAndroid()){
    video = attElement.querySelector('.video');
    video.src = filepath;
    video.webkitRequestFullscreen();
    //video.onclick = function(){document.webkitExitFullscreen();}
}

我认为这不起作用，任何与此类似的解决方案？

height: calc((100vh-70px)/3);

Answer 1

如果您希望它具有响应性，那么您可以使用媒体查询来考虑不同的屏幕尺寸。或者，使用Bootstrap或其他一些网格系统。

如果您的目标是在屏幕更改大小时更改列的大小，那么您可以使用以下内容：

$(window).resize(function(){
    $('.column').css("height", $(window).height() / 3);
});

显然，这并没有考虑导航，但你明白了。

编辑：

@gyre指出我们应该专注于CSS，所以这里是一个扩展选项。

如果您希望列始终从顶部延伸到底部，则可以使用百分比并将它们与媒体查询混合，以估算各种尺寸之间的所需平衡。例如：

@media screen and (max-width: 480px){
    .column{
        height: 85%;
    }
}
@media screen and (max-width: 780px){
    .column{
        height: 95%;
     }
}

但是，这只会使列为父元素的85％。所以你应该考虑到这一点。

Answer 2

calc（）应该适用于您要执行的操作，请注意，calc() docs +和 - 运算符必须用空格包围。

注意： +和 - 运算符必须始终用空格包围。例如，calc（50％-8px）的操作数将被解析为a 百分比后跟一个负长度，一个无效的表达，而 calc（50％ - 8px）的操作数是一个百分比，后跟一个减号标志和长度。更进一步，calc（8px + -50％）被视为a 长度后跟一个加号和一个负百分比。 *和/ 运算符不需要空格，但添加它是为了保持一致性允许，并推荐。

所以将你的身高改为

height: calc((100vh - 70px)/3);

在视口中使用导航栏使3列高度相等

2 个答案:

编辑：