时间戳

首页 > 解决方案 > 有没有根据窗口大小改变元素高度的好方法？

sass - 有没有根据窗口大小改变元素高度的好方法？

问题描述

我正在使用带有“vh”单位的高度，但它没有我想要的那么好。我有一个下拉菜单，里面有一个滚动条，它的大小是：'height:32vh'，在我需要支持的最小分辨率下，它看起来还不错（有一个很好的滚动条，并且下拉菜单没有分类）。但在大屏幕中，我希望下拉菜单高于 32vh 的值。在我使用 'vh' 单位之前，我使用了 max-height: 320px，但是小分辨率的下拉菜单被卡住了，如果我在大屏幕上放小于 320px 的下拉菜单太短了。这个问题有解决方案吗？

<div class="parent">
<div class="arrow-up"></div>

<div class="checkbox group">
    <label class="ng-binding">
    ...
    </label>
</div>

<div class="separator"></div>

<div>
    <button type="button" class="btn btn-link select-btn ng-binding" ng-disabled="isSelectAllDisabled()" ng-click="selectAll()" disabled="disabled">Select All</button>
    <button type="button" class="btn btn-link select-btn ng-binding" ng-click="selectNone()">Select None</button>
</div>
<div class="columns-list scroll">
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
        ...
</div>

样式：

.parent {
    height: 34vh;
    display: flex;
    flex-direction: column;
}
.columns-list.scroll {
    overflow-y: auto;
}

标签： sassscreen-resolution

解决方案

推荐阅读