Html 具有动态右侧内容的 100% 高度左侧边栏 - Bootstrap + Wordpress
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13909864/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
100% height left sidebar with dynamic right content - Bootstrap + Wordpress
提问by Joshua Walker
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.
我正在使用 Bootstrap 和 Wordpress 制作网站。这是一个 2 列布局 - 左侧边栏，右侧内容。正确的内容是动态的，可以无限滚动扩展。我试图通过几种技术使左侧边栏的高度为 100%，但无济于事。
I'd like the sidebar to continue down according to the size of the viewport/height of the right content div.
我希望侧边栏根据右内容 div 的视口/高度的大小继续向下。
I've made a bare fiddle: http://jsfiddle.net/ydPMr/3but it would be better if you saw what I was talking about on my dev page: http://joshuawalker.koding.com.
我做了一个简单的小提琴：http: //jsfiddle.net/ydPMr/3但如果你在我的开发页面上看到我在谈论的内容会更好：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.
如果有人对如何使侧边栏伸展全高有任何想法，我将不胜感激。
Thanks!
谢谢！
回答by syed mohsin
This is working fine for me. Fiddle
这对我来说很好用。小提琴
I set the min-Heightto 500px. If you don't want minimum, remove it. It will work according to the heightof your content in the content div. Like this Fiddle
我设置min-Height为500px. 如果您不想要最小值，请将其删除。它将根据height您在content div. 像这个小提琴
<div class="wrapper">
<div class="sidebar hidden-phone">
</div>
<div class="content">
</div>
</div>
and style
和风格
<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>
