100％高度左侧边栏与动态权利内容 - Bootstrap + Wordpress [英] 100% height left sidebar with dynamic right content - Bootstrap + Wordpress

问题描述

我使用Bootstrap和Wordpress制作网站。它是一个2列布局 - 左侧边栏，正确的内容。正确的内容是动态的，通过无限滚动进行扩展。我试图通过几种技术，使左侧边栏100％的高度，但没有效果。

I'm making a website using Bootstrap and Wordpress. It's a 2-column layout - left sidebar, right content. The right content is dynamic and expands by infinite scroll. I've tried to make the left sidebar 100% height through several techniques but to no avail.

我想侧栏继续下来，根据正确内容div的视口/高度。

I'd like the sidebar to continue down according to the size of the viewport/height of the right content div.

我做了一个无聊的小提琴： http://jsfiddle.net/ydPMr/3 ，但如果您在我的开发者页面上看到我在说什么会更好： http ：//joshuawalker.koding.com 。

I've made a bare fiddle: http://jsfiddle.net/ydPMr/3 but it would be better if you saw what I was talking about on my dev page: http://joshuawalker.koding.com.

这是我的页面的基本结构：

Here is the basic structure of my page:

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

如果任何人有任何想法如何使侧边栏伸展到全高，我会很感激。

If anyone has any ideas on how to make the sidebar to stretch full height, I would appreciate it.

谢谢！

推荐答案

小提琴

This is working fine for me. Fiddle

我将 min-Height 到 500px 。如果你不想要最小，删除它。它将根据 content div 中的内容的 height 工作。像这样 小提琴

I set the min-Height to 500px. If you don't want minimum, remove it. It will work according to the height of your content in the content div. Like this Fiddle

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

这篇关于100％高度左侧边栏与动态权利内容 - Bootstrap + Wordpress的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！