如何讓我的側邊欄和主要內容的高度一致？

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

如何讓我的側邊欄和主要內容的高度一致？

回答

相關問題