css - Bootstrap 100% 高度右侧边栏

Question

我正在使用具有 2 列布局的 Bootstrap 3。右栏是我的侧边栏。每个人都有不同的背景，我可以看出我的侧边栏栏不会一直延伸到主要内容包装器的底部。在大多数情况下，右侧的主要内容比侧边栏内容长，但我不想看到主要内容区域的背景，而是侧边栏内容背景继续。

这是我为实现 100% 高度侧边栏而建模的 jsfiddle，但我似乎无法让它工作。

http://jsfiddle.net/34Fc5/1/

这是我的代码的要点:

<div id="content" class="clearfix row">         
    <div id="main" class="col-sm-8 clearfix" role="main">                                   
        <article id="post-1728" class="post-1728 page type-page status-publish hentry clearfix" role="article" itemscope="" itemtype="http://schema.org/BlogPosting">                   
            <header>                            
                <div class="page-header"><h1 class="entry-title" itemprop="headline">About</h1></div>                       
            </header> <!-- end article header -->

            <section class="post_content clearfix" itemprop="articleBody">
                <p class="lead">LENGTHY CONTENT</p>                 
            </section> <!-- end article section -->

            <footer>

            </footer> <!-- end article footer -->

        </article> <!-- end article -->

    </div> <!-- end #main -->
    <div id="sidebar1" class="col-sm-4" role="complementary">
            <div class="sidebar-content"></div>
    </div>        
    <div style="clear:both">
</div>

这是我的 jsfiddle:

http://jsfiddle.net/8yvgh7xj/

如果有人以前遇到过这个问题，那就太好了。我看到很多 100% 的左侧边栏，但没有使用 Bootstrap 的右侧边栏。

谢谢。

Answer 1

我感受到了你的痛苦。我遇到了这个问题，似乎没有很多解决这个问题的优雅方法。可以采取的一些方法包括:

1. 使用内边距和负边距增加高度(见下文)

   • http://www.positioniseverything.net/articles/onetruelayout/equalheight

   • 我在以前的元素中使用过它并且效果很好 - 文章中解决了一些问题 - 但我发现这种技术是可靠的。

2. 使用Javascript在运行时增加div的高度

   • 在计算和调整 div 的高度时，您可能会看到闪烁。

3. 使用表格

   • 不适合页面布局的 Bootstrap 范例 - 响应式设计可能存在问题

下面的问题CSS - Expand float child DIV height to parent's height比较详细地解决了这个问题。

你的 CSS 变成:

#content {
   overflow: hidden;
}

#sidebar1{
   background-color:#eee;
   background-repeat: repeat;
   margin-bottom: -99999px;
   padding-bottom: 99999px;
}

#sidebar1 .sidebar-content{ 
    width:100%;
    padding: 5px;
    margin:0;
    position:relative;
}