如何使侧边栏和主要内容的高度一致？答案

【问题标题】：How to I make my the height of my sidebar and main content consistent?如何使侧边栏和主要内容的高度一致？
【发布时间】：2013-03-26 04:24:41
【问题描述】：

目前我正在为我的网站使用 wordpress。我的侧边栏和主要内容区域的高度不对齐。如何使侧边栏的高度与主要内容一致？示例 pageA 的内容较长，但侧边栏较短，因此未使用的侧边栏区域将被空白区域填充。

下面是我的 index.php 代码。

<?php get_header(); ?>
  <div id="table">
      <div id="mainsidebar">
          <?php get_sidebar(); ?>
      </div>
      <div id="maincontent">
          <div valign="top">
            <?php wowslider(9); ?>
          </div>
          <div valign="bottom">
            <?php include('main-content.php'); ?>
          </div>
      </div>
  </div>
<?php get_footer(); ?>
</body>

这里是我上传的示例图片链接。

谢谢。

【问题讨论】：

答案可以在这篇文章中找到：stackoverflow.com/questions/10988381/…

标签： php html css wordpress

【解决方案1】：

如果你不介意使用 javascript：

$(function(){
    var main = $('#maincontent').height(),
        sidebar = $('#mainsidebar').height();
    if(main > sidebar){
        $('#mainsidebar').css({'min-height':main});
    }
});

【讨论】：

@Pey，我知道这是一个迟到的回复，但我发现这对于我目前正在从事的无法使用 CSS 解决方案的项目很有用。这需要进入一个外部 .js 文件并链接到您网站的页脚中，或者将其包装在 <script> [code here] </script> 标签中并放置在页脚中

【解决方案2】：

我为此使用equalize.js。超级简单的设置和出色的工作！

【讨论】：

【解决方案3】：

将<div id="mainsidebar"></div> 和<div id="maincontent"></div> 放在另一个div 中。使该 div 与maincontent div 的高度相同。并为mainsidebar div 提供height:100%。

来自here的想法。

【讨论】：

【解决方案4】：

正如 here 所发布的，您可以使用 CSS 来做到这一点：

.container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: grey;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}

HTML：

<div class="container">
    <div class="column">Some content!
        <br/>Some content!
        <br/>Some content!
        <br/>Some content!
        <br/>Some content!
        <br/>
    </div>
    <div class="column">Something</div>
</div>

或尝试以下方法：

发件人：Two floating divs side by side, same height

HTML：

<div id="table">
    <div id="mainsidebar">
        <p>Main Sidebar Content</p>
    </div>
    <div id="maincontent">
        <p>Main Content</p>
    </div>
</div>

CSS：

#table { position: relative; }

#mainsidebar { /* shorter column */
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 38%;
    padding: 2%;
}
#maincontent { /* taller column */
    margin: 0 0 0 42%;
    width: 58%;
}

【讨论】：

【解决方案5】：

您不需要使其高度相同。将表格背景设置为“白色”，看起来两者的高度相同

#table {background: #fff;}

【讨论】：