html – 具有动态正确内容的100％左侧边栏 – Bootstrap WordPre

发布时间：2020-12-14 23:51:14 所属栏目：资源来源：网络整理

导读：我使用Bootstrap和Wordpress制作一个网站.这是一个2列的布局 – 左边栏,正确的内容.正确的内容是动态的,并通过无限滚动扩展.我试图通过几种技术使左侧边栏100％的高度,但无济于事. 我想让侧边栏根据正确的内容div的视口/高度的大小继续下去. 我做了一个裸露

我使用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>

如果任何人有任何想法,如何使侧边栏伸展全身,我会很感激.

谢谢！

解决方法

这对我来说很好. Fiddle

我将最小高度设置为500px.如果你不想要最小值,删除它.它将根据您的内容在内容div的高度工作.喜欢这个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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!