Question

我使用带有2列布局的Bootstrap 3。右栏是我的侧栏。我有不同的背景，我可以告诉我的侧栏列不会一直到主内容包装器的底部。在大多数情况下，右侧的主要内容比侧边栏内容长，但我不想看到主要内容区域的背景，但侧边栏内容背景仍在继续。

这是我为了达到100％身高的侧边栏而模仿的jsfiddle，但我似乎无法让它发挥作用。

这是我的代码的要点：

<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>

这是我的傻瓜：

http://jsfiddle.net/8yvgh7xj/

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

感谢。

Answer 1

左侧的边栏

On选项将通过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>

Answer 2

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

使用填充和负边距来增加高度（参见下文）
- http://www.positioniseverything.net/articles/onetruelayout/equalheight
- 我在之前的项目中已经使用过它，它的工作非常好 - 文章中提到了一些问题 - 但我发现这种技术是可靠的。
使用Javascript在运行时增加div的高度
- 你可能会看到一个闪烁，同时计算和调整div的高度。
使用表格
- 与布局页面的引导范例不相符 - 可能存在响应式设计问题

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

Bootstrap 100％高度右侧边栏

2 个答案:

左侧的边栏

右侧边栏