WordPress：使主要内容区域的侧边栏匹配高度

Question

我正在使用我多年前设计的旧WordPress网站，现在我正在使其响应。问题是我在网站上有一个主要的内容区域和侧边栏div，问题是侧边栏div没有扩展到这个网站上#contentWrap div的整个高度。我已经尝试在#page，＃contentWrap和#sidebar上添加100％的高度，但都无济于事。在旧的网站设计中，我使用背景图像做了一个技巧，但实际上这不适用于响应式设计。任何想法如何使这个工作？

有问题的网站：http://destinationbeershow.com/episode-guide/

代码：

<div id="contentWrap">
<div id="content" class="narrowcolumn">
</div>
<div id="sidebar">
</div>
</div>

CSS：

#contentWrap {
    width: 856px;
    height: 100%;
}

#page {
   background-color: #ac4f23;
   text-align: left;
   margin: 0px auto;
   width: 856px;
   height: 100%;
}

.narrowcolumn {
    background-color: #ac4f23;
    float: left;
    padding: 0;
    margin: 0;
    width: 640px;
    color: #FFF;
}

#sidebar {
    padding: 16px 8px 10px 8px;
    float: right;
    width: 160px;
    height: 100%;
    font: 11px 'Lucida Grande', Verdana, Arial, Sans-Serif;
    border-left: 10px solid #fff;
    background-color: #ebd299;
}

Answer 1

你可以让所有东西在你的856px硬宽度以下崩溃并使用其中的百分比，或者你可以摆弄数学。你也没有提到你是如何进行媒体查询的，我首先假设移动设备，这意味着IE8不会看到列，除非你了解更多信息或使用桌面第一响应式设计，然而，无论内部是什么，都要使列具有相同的高度，这里的一种方式（显示：table / display：table-cell）堆叠在#page上的856px宽度之下。使用百分比。

DEMO：http://jsbin.com/biyito/1/

<强> CSS：

.narrowcolumn {
    background-color: #ac4f23;
    color: #fff;
    box-sizing: border-box;
    padding: 10px 20px;
}
#sidebar {
    padding: 10px 20px;
    border-top: 10px solid #fff;
    background-color: #ebd299;
    box-sizing: border-box;
}
@media (min-width:856px) { 
    #contentWrap {
        width: 100%;
        display: table;
    }
    .narrowcolumn {
        width: 80%;
        display: table-cell;
    }
    #sidebar {
        display: table-cell;
        padding: 10px;
        width: 20%;
        border-left: 10px solid #fff;
        border-top: 0px;
    }
}

<强> HTML

<div id="contentWrap">

   <div id="content" class="narrowcolumn">
      <h1>HTML Ipsum Presents</h1>
      <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
   </div>

   <div id="sidebar">
      <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
   </div>

</div>

Answer 2

#contentWrap没有高度...我试过我真的试图让它对你的内容做出响应，但它只是不起作用。现在，如果您定义它的高度，那么该栏将是端到端的。

在该页面中，高度为1361px

如果您可以将内容放在http://jsfiddle.net/中，则更容易找到并解决问题。