我在表单底部有一个选择角度的多选元素，并希望使其成为下拉框，而不是下拉框。Angular选择的似乎没有下拉选项。select元素产生的html如下：
<select multiple chosen>
<div class="chosen-container chosen-container-multi">
<ul class="chosen-choices">
...
</ul>
<div class="chosen-drop">
...
</div>
</div>
我要向上移动的是.chosen-drop div。
如果我设置.chosen-drop元素的css top值以将该元素移动到正确的位置，则它的定位是完美的，但是在过滤列表时，发现很少或没有项目，则下拉列表相对于top缩小dropdown元素，在下拉菜单（父div上方）和父div顶部之间留有空隙。
如果我将.chosen-drop元素的css底值设置为将其移动到父级之上，则过滤项会使它向下缩小，从而消除了下拉列表和父级div之间的间隙，但是一旦选择了更多项，父级div的高度增加，从而更改了下拉列表框的所需位置。这是因为css bottom值使.chosen-drop div的底部相对于其父div的底部保持不变。
有什么方法可以设置.chosen-drop div相对于其父div顶部的底值？
chosen-drop只要您的父div可能会增加大小，就可以通过使用css中的calc（）快速计算差值来将位置的底部设置为公式：
.chosen-drop { bottom: calc(100% - px); }
100％表示要从父div的高度中减去多少，而px是要在div的“底部”上方添加的填充量（以像素为单位）。您可以将calc用于简单的计算，我认为这是添加到css3的一个不错的功能。
在您的情况下，您希望chosen-dropdiv位于其父级的顶部（这是div的整个高度）：
.chosen-drop { bottom: calc(100%); }
要不就
.chosen-drop { bottom: 100%; }
我应该提一下，尽管这calc()是CSS3标准，并且可能与旧版浏览器不兼容。您可以在calc() 此处阅读更多激动人心的进展。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句