时间戳

首页 > 解决方案 > Bootstrap 列布局更改时如何删除最大高度/溢出属性

javascript - Bootstrap 列布局更改时如何删除最大高度/溢出属性

问题描述

我col在一个 Bootstrap row/中有两个元素container。左侧是固定大小，包含一个静态的table。右侧包含一个表格，与左侧类似，但它是根据加载页面时检索到的数据动态生成的。

所以，当然右边的桌子可以比左边的桌子高。我将右表的max-height属性设置为左表的高度，并且overflow-y: scroll用 JavaScript 计算出来。这在桌面上看起来和工作得很好。

供参考的代码要点，HTML：

<div class="container">
    <div class="row">
        <div class="col">
            <table id="tblLegend">...</table>
        </div>
        <div class="col">
            <table id="tblStops">...</table>
        </div>
    </div>
</div>

JavaScript：

$(document).ready(function() {
    var mxHt = $("#tblLegend").css("height");
    $("#tblStops").css("max-height", mxHt)
                  .css("overflow-y", "scroll");
});

但是，如果页面以移动格式显示或调整为移动屏幕的大小，我希望能够从元素中删除max-height（以及随后的overflow-y）属性。tblStops在这种情况下，两个表格将垂直堆叠在一起，移动设备不需要单独的滚动窗格。（更不用说移动设备上的内部滚动窗格有时令人讨厌且难以控制）。

window.size有没有一种相对简单的方法可以在不诉诸window.resize事件的情况下做到这一点？我只是不喜欢必须检查硬编码的屏幕/窗口尺寸的想法。

标签： javascripthtml

解决方案

您可以在 JavaScript 中检测屏幕大小。当您使用 JQuery 时：

if ($(window).width() < 700) {
  $("#tblStops").css("max-height", "auto")
                  .css("overflow-y", "auto");
}

自动值将根据溢出的要求添加或删除滚动。在高度最小高度将应用于内容。

注意：可能不适用于 Iphone。

编辑：width() 将根据浏览器返回值，对于 iphone，宽度 700 可能不起作用。

推荐阅读