使用javascript或css自動調整高度div

-1

在此頁面enter link description here您看到右側邊欄，我希望此列與主要中央列具有相同的高度。我認爲這需要JavaScript或CSS，但我不知道如何。這是一個Joomla CMS，但我可以在模塊中添加一些代碼。使用javascript或css自動調整高度div

謝謝。

來源

2015-07-20 Laurent

首先嚐試用CSS解決問題。也許你應該看看這樣的一些教程：https：//developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started – RhinoDevel

可能的重複[CSS - 展開孩子DIV高度父母的高度]（http://stackoverflow.com/questions/4804581/css-expand-child-div-height-to-parents-height） –

你好@alynioke我看到你已經刪除了你的解決方案，爲什麼，這對我來說是有用的？ – Laurent

你可以用CSS單獨解決這個問題，採用了仿柱技術，這裏是一個演示：https://jsfiddle.net/1r8xygnL/。我更新了下面的ID和CSS，以反映您鏈接到的頁面上的ID。

<div id="main"> 
    <div class="faux-col-right"><!-- this is just for the background //--></div> 

    <div id="center"> 
    <!-- center column content goes here //--> 
    </div> 

    <div id="right"> 
    <!-- right column content goes here //--> 
    </div> 
</div> 

#main { 
    position: relative; 
    overflow: auto; 
    zoom: 1; 
} 

.faux-col-right { 
    background: #cccccc; 
    position: absolute; 
    left: 69.047619047619%; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    z-index: 1; 
} 

#right { 
    width: 30.952380952381%; 
    float: left; 
    position: relative; 
    z-index: 2; 
} 

#center { 
    width: 69.047619047619%; 
    float: left; 
}

來源

2015-07-20 17:14:53

你好你的解決方案是更好的，但如果喜歡在這個頁面上http://bit.ly/1RK5Dzy沒有左欄，這是一個問題。 – Laurent

謝謝我通過改變CSS只爲這個頁面找到 – Laurent

您可以使用javascript。此頁面包含jQuery。因此，將此添加到您的頁面

<script> 
$(function(){ 
    jQuery('#right .inner'). 
    css('height', jQuery('#center .inner').height()) 
})

您必須使用inner_element。因爲背景被應用於內部。如果我們改變$（'＃right'）的高度，你就不會看到它。

來源

2015-07-20 17:06:34 Aminadav

你好，謝謝，但這不起作用。 – Laurent

是的，你可以使用jQuery做到這一點，你可以用.height()獲得的分內容

$(document).ready(function(){ 
    var mainHeight = $('#center').height(); 
    alert(mainHeight); 
});

來源

2015-07-20 17:06:38

謝謝我嘗試在頁面上添加此代碼，但這不起作用。 – Laurent

你不需要的JavaScript或JQuery的所有高度。你可以用一些CSS來解決這個問題。幾乎相同的問題，在這裏回答：

CSS - Expand float child DIV height to parent's height

來源

2015-07-20 17:14:14

很好的答案。我不確定如果正確的列內容超過了左列內容，此解決方案就可以工作。我發佈的解決方案應該適用於上下文。 –

是的，如果正確的列內容超過中間列，這個解決方案不工作 – Laurent

使用javascript或css自動調整高度div

回答

相關問題