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. 使用表格

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

以下问题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;
}

Answer 2

左侧边栏

启用选项将通过absolute 定位从正常流程中移除侧边栏，并通过top: 0、bottom: 0 相对于包装器.wrap 的声明扩展其高度（边距框）。

.sidebar {
    position: absolute;
    top: 0; bottom: 0; left: 0;
}

.wrap {
    position: relative;
    min-height: 100%;
}

然后我们需要将包含<article> 的右列向右推col-xs-offset-4 偏移量类 - 基于侧边栏的大小 - 如下：

EXAMPLE HERE

<div class="col-xs-8 col-xs-offset-4"> ... </div>

---

右侧边栏

考虑到相同的方法，唯一应该改变的是将left: 0 更改为right: 0。 也不需要在另一列上有偏移类；因此，您也可以删除 col-xs-offset-4。

UPDATED EXAMPLE

<div class="col-xs-8"> ... </div>