Question

我正在尝试让我的右侧边栏填充以扩展此网站上#wrapper内容的全部内容：http://www.starmedianetwork.com/

我在它周围放了一个红色边框，试图看看我的#right在我的页面上的位置。我曾尝试过：

身高：#right和其他人的100％。还在google上搜索了关于明确修复的内容，但是我无法解决这个问题，也遇到了专家交流的一些解决方案，但是那些没有用。

我有什么想法可以让我的侧边栏以背景颜色延伸以适应长度？

Answer 1

你可以通过虚假侧边栏实现这一目标：

<div class="sidebar_back"><.div>
<div class="sidebar">
  <p>The sidebar content</p>
</div>

用这个css：

.sidebar_back {
  top: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 200px;
  background: #444; // the color you want the sidebar to be
  position: absolute;
}

.sidebar {
  float: left;
  width: 180px;
  padding: 10px;
}

.sidebar_back将一直延伸到页面底部，所以只需给出侧边栏所需的颜色，实际的侧边栏div就会显示为全高。您也可以使用基于百分比的宽度而不是像素。这是一个显示示例的codepen： http://codepen.io/poopsplat/full/jquBv

Answer 2

您可以尝试这种方法：http://www.alistapart.com/articles/multicolumnlayouts/

Answer 3

你不能得到一个div来填充它的父亲的高度。它可能在一个浏览器中工作，但我遇到了这个问题，并不是简单地通过高度解决：100％。

您可以通过创建一直向下拼贴的背景来模拟背景。这不是最优雅的解决方案。

我发现的唯一其他解决方案是使用javascript。页面加载后，您可以根据希望在其中展开的div的高度，将div的高度精确设置为所需的高度。

可能有一些javascript库可以帮助你定位这个麻烦的div，但我现在无法想出一个。

Answer 4

我没有试过这个，但是......感觉它应该起作用（当然这可能是尝试的死亡之吻）：

#wrapper
    {position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: block;
    width: 100%;
    background-color: #ffa;
        }

#right {position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 15%; /*  this has to be fixed-size so you can account
            for it in the next bit; but can still be kinda
            fluid-ish... */
    display: block;
    background-color: #ccc;
    overflow: auto;
        }

#left   {width: 83%; /*  100 - (15% + 2% (for a gutter)) */
    margin-left: 1%;
        margin-right: 16%; /*   less than 100 - 83, to allow for rounding of % or px */
    display: block;
    background-color: #0ff;
    overflow: auto;
        }

p   {display: block;
    margin: 0.5em;
    padding: 0.2em 0.5em;
        }

...

<body>

    <div id="wrapper">

        <div id="left">
            <p>The left-hand content</p>

        </div>

        <div id="right">
            <p>The right-hand content</p>
        </div>

    </div>

</body>

它不是很漂亮，但确实有效。虽然我不喜欢使用position: absolute（或fixed），所以如果有人有更好的建议我会去找它=）

顺便提一下，在 http://www.davidrhysthomas.co.uk/so/cols.html处有实施的工作演示（添加了'lorem ipsum'善良）。

（好吧，我说谎了：我显然已经尝试过了...）

Answer 5

以下是我找到解决此问题的方法：

您必须使用四个div标签 - 一个主容器，其中包含侧边栏，主要内容和页脚。

首先，在样式表中添加元素并设置样式：

#container {
width: 100%;
background: #FFFAF0;
}

.content {
width: 950px;
float: right;
padding: 10px;
background: #FFFAF0;
}

.sidebar {
width: 220px;
float: left;
padding: 5px;
background: #FFFAF0;
}

#footer {
clear:both;
background:#FFFAF0;
}

您可以根据需要编辑不同的元素，但请确保不要更改页脚属性“clear：both” - 这一点非常重要。

然后，只需设置您的网页：

<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>

我在{http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container][1]写了一篇更深入的博客文章。请让我知道，如果你有任何问题。希望这有帮助！

Answer 6

我使用jQuery解决了我的侧边栏问题，只需几行代码

$('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); // Extend sidebar to bottom of viewport
$(window).resize(function(){
    $('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of bar when viewport height changes
    $('#main').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of main content when size of viewport changes
});

它似乎适用于所有浏览器，但是，当右侧的内容较大时，向下滚动时会出现视口和问题。它可以通过一些内容高度检查来修复，但对我来说并不重要。希望能帮助那些人=）

向下扩展侧边栏

6 个答案: