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/

如果有人之前遇到过这个问题,那将会很棒.我看到很多LEFT侧边栏100%,但没有右边的Bootstrap.

谢谢.

Answer 1

左侧边栏

上选择将被通过从除去正常流量的边栏中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偏移类-基于侧边栏的大小-如下:

这里的例子

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

侧边栏右侧

考虑到相同的方法,唯一应该改变的是改变left: 0为right: 0.另外,没有必要在另一列上有偏移类; 因此你也可以删除col-xs-offset-4.

更新的例子

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

Answer 2

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

1. 使用填充和负边距来增加高度(参见下文)

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

   • 我在以前的项目中已经使用过它,它的工作非常好 - 文章中提到了一些问题 - 但我发现这种技术是可靠的.

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

   • 你可能会看到一个闪烁,同时计算和调整div的高度.

3. 使用表格

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

以下问题CSS - 将float子DIV高度展开为父高度可以更详细地解决问题.

你的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;
}