语义 UI 底部侧边栏增加大小

Question

有什么办法可以增加底层语义UISidebar的大小（高度）？

如果向 div 元素添加宽类，它会切断条形图。 “wide”仅用于垂直侧边栏，不适用于水平侧边栏。 "wide" 只影响侧边栏的宽度，而不影响它的高度。

这是我的fiddle 尝试解决方案。

HTML

<div class="ui bottom sidebar deep vertical inverted menu" id="bottom-side">
    <div class="header item">Bottom Sidebar menu</div>
    <a class=item>Foo</a>
    <a class=item>Foo</a>
    <a class=item>Foo</a>
</div>

JS

$(document).ready(function () {
   $('#bottom-side').sidebar('toggle');
});

CSS

.ui.deep.bottom.sidebar {
    height: 400px;
}

.ui.deep.active.bottom.sidebar {
    height: 400px;
}

Answer 1

语义 UI CSS 在设置高度时使用!important，因此您也需要使用它来覆盖它。看起来您还需要一个等于高度的负上边距。更新小提琴：https://jsfiddle.net/m4th0hb3/1/

.ui.deep.active.bottom.sidebar {
    height: 400px !important;
    margin-top: -400px !important;
}