Bootstrap 右侧边栏高度100%

Question

Bootstrap 右侧边栏高度100%

4

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

这是我参考的jsfiddle，以实现100％高度的侧边栏，但似乎无法使其工作。

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/

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

谢谢。

- Rick Scolaro

2个回答

6

我理解您的痛苦。我曾经遇到过这个问题，似乎没有很多优雅的解决方案。可以采取的一些方法包括：

使用padding和负边距来增加高度（参见下面的文章）
- http://www.positioniseverything.net/articles/onetruelayout/equalheight
- 我之前在一些项目中使用过这种方法，效果非常好 - 文章中提到了一些问题 - 但我发现这种技术是可靠的。
使用Javascript在运行时增加div的高度
- 在计算和调整div高度时可能会出现闪烁。
使用表格
- 不适用于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;
}

- Alan Wolman

这个方法是可行的，尽管我最终并没有需要侧边栏内容div或css。 - Rick Scolaro

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hashem Qolami · Accepted Answer

左侧边栏

一种选择是通过 absolute 定位将侧边栏从正常流中移除，并通过针对包装器 .wrap 的 top: 0 和 bottom: 0 声明来扩展其高度（外边距框）。

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