我正在使用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>
如果有人对如何使侧边栏拉伸全高有任何想法,我将不胜感激。
谢谢!
这对我来说工作正常。小提琴
我将min-Height
设置为 500px
.如果您不想要最小值,请将其删除。它将根据您在content div
中的内容height
工作。像这个小提琴
<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>