如何让我的侧边栏和主要内容的高度一致？

目前我使用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>

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

感谢。

来源

2013-03-26 Pey

答案可以在这个帖子中找到： http://stackoverflow.com/questions/10988381/equal-height-divs -two-column/15584074＃15584074 – 2013-03-26 06:11:28

如果你不介意使用javascript：

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

来源

2013-03-26 04:30:52

我应该在哪里放这个js代码？ – Pey 2013-03-26 05:00:42

@Pey，我知道这是一个很晚的回复，但是我发现这对于我目前正在从事CSS解决方案无法实现的项目很有用。这需要进入外部.js文件并链接到您网站的页脚中，或者将其包装在''标签中并放置在页脚中 – 2014-01-23 12:24:23

我用equalize.js这一点。超级简单的安装和工作非常出色！

来源

2013-03-26 04:32:27

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

来自here的想法。

来源

2013-03-26 04:35:40

张贴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%; 
}

来源

2013-03-26 20:54:47 xdividr

客人不愿意需要让相同的高度。设置表格背景的“白”，它看起来就像两个具有相同的高度

#table {background: #fff;}

来源

2016-04-28 11:30:29

如何让我的侧边栏和主要内容的高度一致？

回答

相关问题