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

Question

我正在使用我多年前设计的旧 WordPress 网站，现在我要让它响应。问题是我在网站上有一个主要内容区域和一个侧边栏 div，问题是侧边栏 div 没有扩展到此网站上 #contentWrap div 的整个高度。我已经尝试将 100% 的高度添加到#page、#contentWrap 和#sidebar，但都无济于事。在旧站点设计中，我使用背景图片做了一个技巧，但实际上这不适用于响应式设计。知道我如何才能做到这一点吗？

有问题的网站: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

您可以将所有内容折叠到您的 856 像素硬宽度以下并在其中使用百分比，或者您可以摆弄数学。你也没有提到你是如何进行媒体查询的，我假设移动优先，这意味着 IE8 不会看到列，除非你了解更多信息或使用桌面优先响应设计，但是要使列成为相同的高度，无论里面是什么，这是一种方式(显示:表格/显示:表格单元格)，它堆叠在#page 上的 856px 宽度以下。使用百分比。

演示: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>