Css 向下扩展侧边栏页面

我正在尝试填充右侧边栏，以扩展此站点上我的包装中的内容的完整长度：

我在它周围画了一个红色边框，试图看看我的右边在我的页面上的什么位置。我曾尝试与以下人员合作：

身高：100%在右侧和其他位置。我也在谷歌上搜索了一些清晰的修复方法，但我没有找到太多的工作，也在专家交换上找到了一些解决方案，但这些都不起作用

---

有什么办法可以让我的边栏扩展背景颜色以适应长度吗？

你可以尝试这种方法：

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

您可以通过创建沿侧面平铺的背景来模拟背景。这不是最优雅的解决方案

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

---

可能有一些javascript库可以帮助您定位这个麻烦的div，但我现在还不能想出一个。我还没有尝试过这个，但是…感觉它应该可以工作（这当然可能是一个致命的尝试）：

左边的内容

右边的内容

它不太漂亮，但确实管用。虽然我不喜欢使用

position:absolute

（或

fixed

），但如果有人有更好的建议，我会选择它=）

顺便说一句，在：

---

（好吧，我撒谎了：我现在显然已经试过了…

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

您必须使用四个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:All”-这一点非常重要

然后，只需按如下方式设置您的网页：

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

---

我在[]上写了一篇更深入的博客文章。如果您有任何问题，请告诉我。希望这能有所帮助！

我使用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
});

---

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

您可以通过一个人造边栏来实现这一点：

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

.sidebar\u back

将一直延伸到页面底部，因此只需指定侧边栏的颜色，实际的侧边栏div将显示为全高。您也可以使用基于百分比的宽度，而不是像素。下面是一个代码笔，显示了一个示例：

---

为父对象指定一个高度（不管您喜欢），并指定

位置：相对的
；然后指定子对象的
位置：绝对的
（顶部：和底部：为0）它可以填充父母的高度。但不一定漂亮。这怎么会没有帮助？链接包含了问题的解决方案。你可以看到它在这里工作：它不会延伸到浏览器窗口的底部。感谢帮助我解决了我遇到的一个非常类似的问题的人。谢谢！
$('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
});

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

.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;
}