CSS - 侧边栏在缩放模式下未全尺寸

Question

我的边栏有问题。我希望它始终是完整尺寸。如果我的浏览器窗口太小，它应该允许我向下滚动而不会丢失其背景颜色。如果您查看下面的图片，您会发现当我向下滚动时背景不起作用。

全屏:

缩放/窗口模式:

这是我的侧面板的 CSS。

.sidebar {
    background-color: #1C252E;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 240px;
}

我尝试将它放入包装器中，并将 body 和 html 设置为 100% 高度(并且还测试了最小高度)，但这没有用。

HTML:

<div class="sidebar">
    <!-- User avatar/message/notification/settings buttons -->
    <div class="userpanel">
        <div class="userpanel-image">
            <img src="image.jpg">
        </div>
        <div class="userpanel-buttons">
            <ul>
                <li><a href="#"><span class="glyphicon glyphicon-envelope"></span></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-bell"></span></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-cog"></span></a></li>
            </ul>
        </div>
    </div>

    <!-- My Money -->
    <div class="sidebar-top">
        <div class="sidebar-title">
            First Title
        </div>

        <div class="sidebar-links">
            <ul>
                <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Earnings</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-bell"></span> Referrals</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Sponsorships</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Earn More</a></li>
            </ul>
        </div>
    </div>

    <!-- My Content -->
    <div class="sidebar-middle">
        <div class="sidebar-title">
            Second Title
        </div>

        <div class="sidebar-links">
            <ul>
                <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Earnings</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-bell"></span> Referrals</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Sponsorships</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Earn More</a></li>
            </ul>
        </div>
    </div>

    <!-- Connect -->
    <div class="sidebar-bottom">
        <div class="sidebar-title">
            Third Title
        </div>

        <div class="sidebar-links">
            <ul>
                <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Earnings</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-bell"></span> Referrals</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Sponsorships</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Earn More</a></li>
            </ul>
        </div>
    </div>
</div>

Answer 1

这是我所做的(有多种方法可以做到这一点):

使用这个 CSS:

.sidebar {
    background-color: #1C252E;
    width: 240px;
    position: relative;
    top: 0px;
    bottom: 0px;
    min-height: 100%;
}

这是一个 fiddle :https://jsfiddle.net/8zf7fg87/2/