具有动态右侧内容的 100% 高度左侧边栏 - Bootstrap + Wordpress

Posted 2023-03-05

【中文标题】具有动态右侧内容的 100% 高度左侧边栏 - Bootstrap + Wordpress

【英文标题】：100% height left sidebar with dynamic right content - Bootstrap + Wordpress

【发布时间】：2012-12-04 07:05:14

【问题描述】：

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

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

谢谢！

【问题讨论】：

这是一件棘手的事情。您可以使用 jQuery 或将左侧边栏粘贴在展开的 div 内并将左侧边栏的高度设置为 100% 并确保其所在的 div 具有 position:relative 属性。

您可能会发现这个答案很有帮助：***.com/a/8741070/681807

感谢您的帮助，@MyHeadHurts 和@TrevanHetzal。将牢记您的想法以备将来发展。

这是我的小提琴来说明这一点！ jsfiddle.net/magickirbyz/Lyxwumxv/4

【参考方案1】：

这对我来说很好用。 Fiddle

我将min-Height 设置为500px。如果您不想要最低限度，请将其删除。它将根据您在content div 中的内容的height 工作。赞这个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>

【讨论】：

侧边栏内容不应该在内容区域之后进行搜索引擎优化吗？

@JiewMeng 它在示例中完美运行。如果它不起作用，请通过放置 JSFiddle 来显示您的代码

@syedmohsin 我相信JiewMeng的意思是如果侧边栏比内容大，结果很奇怪。 jsfiddle.net/26y4u12k

这在你渲染一个新页面时有效，但如果你使用 ajax 动态添加内容则不会。