Css 根据屏幕大小更改高度

我有一个可折叠的导航条，它是用Bootstrap4构建的。我使用了col-sm-2和navbar-expand-sm，使它以相同的屏幕大小折叠成一个汉堡包，它应该占据整个宽度

问题是在sm屏幕尺寸以上，我希望它有h-100，因此它是一个侧栏，但作为sm/xs，我希望它只是占用切换按钮所需的空间

是否有任何方法可以通过bootstrap实现这一点，还是我必须添加/删除h-100类

<div class="container">
    <nav class="navbar-nav navbar-expand-sm flex-column navbar-dark col-sm-2 fixed-top" >
        <div>
            <a href="{{url_for('index')}}" class="navbar-brand">
                <img src="{{url_for('static', filename='img/Logo.png')}}" height="50px">
            </a>
            <button class="navbar-toggler col-2 float-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse flex-column" id="navbarResponsive">
            <a class="nav-link {{ 'active' if active_page == 'new_user' else '' }}" href="{{url_for('new_user')}}">Sign Up</a>
            <a class="nav-link {{ 'active' if active_page == 'new_comment' else '' }}" href="{{url_for('new_comment')}}">Opine</a>
        </div>        
    </nav>
</div>

---

这是一个很好的媒体查询用例。。。h-100基本上增加了100%的高度

下面的片段：

nav{
边框：1px纯红；
}
@媒体屏幕和屏幕（最小宽度：579px）{
导航{
边框：1px纯绿色；
高度：100vh；
}
}

---

对于想知道这比jquery好的原因的人来说，这是因为不需要实现“逻辑”。如果你像我一样不知道的话，媒体查询已经并且可能会很有趣