html - 在 Bootstrap 中没有滚动条时，无法获得 "col"背景色来覆盖整个区域

Question

我正在尝试使用 Bootstrap 3.3.7 创建一个简单的页面布局

我的左边有一个可滚动的侧边栏，右边有一个简单的元素，一个像图像这样的简单元素。

我想在右侧添加一个背景图像和颜色来覆盖整个列而没有滚动条，因为它真的不需要，因为我那里只有 1 个简单的小元素。

但是，会出现一个滚动条，当您向下滚动时，侧边栏保持固定，但其顶部会出现一个空白区域。

如果我可以在没有滚动条的情况下让背景颜色覆盖正确的区域，我认为侧边栏会自行修复它，因为不需要整体滚动条。

我尝试了 overflow: hidden 但没有做任何事情。

我正在使用默认的 Bootstrap 元素

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Reports</a></li>
                <li><a href="#">Analytics</a></li>
                <li><a href="#">Export</a></li>
            </ul>
            <ul class="nav nav-sidebar">
                <li><a href="">Nav item</a></li>
                <li><a href="">Nav item again</a></li>
                <li><a href="">One more nav</a></li>
                <li><a href="">Another nav item</a></li>
                <li><a href="">More navigation</a></li>
            </ul>
            <ul class="nav nav-sidebar">
                <li><a href="">Nav item again</a></li>
                <li><a href="">One more nav</a></li>
                <li><a href="">Another nav item</a></li>
            </ul>
            <ul class="nav nav-sidebar">
                <li><a href="">Nav item</a></li>
                <li><a href="">Nav item again</a></li>
                <li><a href="">One more nav</a></li>
                <li><a href="">Another nav item</a></li>
                <li><a href="">More navigation</a></li>
            </ul>
            <ul class="nav nav-sidebar">
                <li><a href="">Nav item again</a></li>
                <li><a href="">One more nav</a></li>
                <li><a href="">Another nav item</a></li>
            </ul>
            <ul class="nav nav-sidebar">
                <li><a href="">Nav item</a></li>
                <li><a href="">Nav item again</a></li>
                <li><a href="">One more nav</a></li>
                <li><a href="">Another nav item</a></li>
                <li><a href="">More navigation</a></li>
            </ul>
            <ul class="nav nav-sidebar">
                <li><a href="">Nav item again</a></li>
                <li><a href="">One more nav</a></li>
                <li><a href="">Another nav item</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" style="background: purple;">

            <div class="row placeholders" style="text-align: center;">
                <img src="http://placehold.it/350x150">
            </div>
        </div>
    </div>
</div>

这是CSS

html, body, .container-fluid {
    height: 100%;
}

.sidebar {
    display: none;
}
@media (min-width: 768px) {
    .sidebar {
        position: fixed;
        top: 52px;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: block;
        overflow-x: hidden;
        overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
        background-color: #273646;
    }
}

/* Sidebar navigation */
.nav-sidebar {
    margin-right: -21px; /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
}
.nav-sidebar > li > a {
    padding-right: 20px;
    padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
    color: #fff;
    background-color: #428bca;
}


/*
 * Main content
 */

.main {
    padding: 20px;
}
@media (min-width: 768px) {
    .main {
        padding-right: 40px;
        padding-left: 40px;
    }
}
.main .page-header {
    margin-top: 0;
}

JSFiddle: https://jsfiddle.net/halnex/3qkgyn0w/5/

谢谢。

Answer 1

你可以添加这个:

.container-fluid {
  height: auto;
  }

和

 body {
  background: purple; 
}

(.container-fluid 有 height: 100% 否则，它被添加到导航栏高度，这再次导致整体高度超过 100%，因此滚动条。)

https://jsfiddle.net/2nn39oqm/