Html 100%高度左侧边栏，带动态右侧内容-引导和#x2B；Wordpress

我正在使用Bootstrap和Wordpress创建一个网站。这是一个两列布局-左侧边栏，右侧内容。正确的内容是动态的，并通过无限滚动扩展。我曾尝试通过几种技术使左侧边栏达到100%的高度，但没有效果

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

我只做了一把小提琴：但是如果你能看到我在我的开发页面上所说的话，那就更好了：

以下是我的页面的基本结构：

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

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

---

谢谢

这对我来说很有效

我将

min Height

设置为

500px

。如果您不想要最小值，请将其删除。它将根据

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


.包装纸
{
最小高度：100%；
宽度：100%；
位置：相对位置；
背景色：黑色；
显示：内联块；
}
.侧边栏
{
宽度：20%；
顶部：0px；
左：0px；
底部：0px；
位置：绝对位置；
背景色：浅绿色；
}
.内容
{
最小高度：500px；
宽度：80%；
位置：相对位置；
背景颜色：灰色；
浮动：对；
}
这是一件棘手的事情。您可以使用jQuery或将左侧边栏插入扩展的div中，并将左侧边栏的高度设置为100%，并确保其所在的div具有position:relative属性。您可能会发现这个答案很有用：谢谢您的帮助，@MyHeadHurts和@TrevanHetzal。我会记住你对未来发展的想法。这是我的小提琴！侧边栏的内容不应该放在搜索引擎优化的内容区域之后吗？@JiewMeng它在示例中工作得非常好。如果它不起作用，请通过放置它来显示您的代码JSFiddle@syedmohsin我相信JiewMeng的意思是，如果边栏比内容大，结果会很奇怪。如果您呈现一个新页面，但如果您使用ajax动态添加内容，则此功能不起作用。
<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>