html - 具有动态右侧内容的 100% 高度左侧边栏 - Bootstrap + Wordpress

Question

我正在使用 Bootstrap 和 Wordpress 制作网站。这是一个 2 列布局 - 左侧边栏，右侧内容。正确的内容是动态的，并通过无限滚动扩展。我试图通过几种技术使左侧边栏的高度达到 100%，但无济于事。

我希望侧边栏根据右侧内容 div 的视口大小/高度继续向下。

我做了一个简单的小提琴： http: //jsfiddle.net/ydPMr/3，但如果你看到我在我的开发页面上谈论的内容会更好：http: //joshuawalker.koding.com。

这是我页面的基本结构：

<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner"></div>
</div>
<div class="wire-unit hero-fix">
</div>
<div class="sidebar hidden-phone"></div>
<div class="content"></div>

如果有人对如何使侧边栏完全伸展有任何想法，我将不胜感激。

谢谢！

Answer 1

这对我来说很好。小提琴

我设置min-Height为500px. 如果您不想要最低限度，请将其删除。它将根据height您在content div. 喜欢这个小提琴

  <div class="wrapper">
    <div class="sidebar hidden-phone">
    </div>
    <div class="content">


    </div>
</div>

和风格

<style type="text/css" >
    .wrapper
    {
        min-height:100%;
        width:100%;
        position:relative;
        background-color:Black;
        display:inline-block;
    }
    .sidebar
    {
        width:20%;
        top:0px;
        left:0px;
        bottom:0px;
        position:absolute;
        background-color:Aqua;
    }
    .content
    {
        min-height:500px;
        width:80%;
        position:relative;
        background-color:Gray;
        float:right;
    }
</style>