扩展边栏向下页 [英] Extending sidebar down page

问题描述

我想让我的右侧边栏填充，以扩展我的#wrapper内的内容在这个网站： http://www.starmedianetwork.com/

I am trying to get my right sidebar to fill to extend the full length of the content within my #wrapper on this site: http://www.starmedianetwork.com/

我在其周围放了一个红色边框，试图看到我的#right在我的网页上。我试过使用：

I put a red border around it to try to see where my #right is on my page. I have tried working with:

height：100％on the #right和其他。还在google上搜索关于明确的修复，但我不能得到那太太工作，也遇到了一些专家交流的解决方案，但那些没有工作。

height:100% on that #right and others. Also searched on google about clear fixes but I couldn't get that too work, also came across some solutions on experts-exchange, but those didnt work.

任何想法

推荐答案

你可以使用虚拟边栏来实现这一点：

You can achieve this with a faux sidebar:

<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将显示为全高度。您可以使用基于百分比的宽度，而不是像素。这里有一个代码展示一个例子：
http://codepen.io/poopsplat/full/jquBv

The .sidebar_back will extend all the way to the bottom of the page, so just give that the color that you'd like the sidebar to be, and the actual sidebar div will appear to be full-height. You can use a percentage-based width instead of pixels too. Here's a codepen showing an example: http://codepen.io/poopsplat/full/jquBv

这篇关于扩展边栏向下页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！