Question

在此页面enter link description here，您会看到右侧边栏，我希望此列与主中心列的高度相同。我认为这需要javascript或css但我不知道如何。这是一个Joomla CMS，但我可以在一个模块中添加一些代码。

感谢。

Answer 1

您根本不需要JavaScript或JQuery。你可以用一些CSS解决这个问题。这里回答了几乎完全相同的问题：

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

Answer 2

你可以单独使用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;
}

Answer 3

您可以使用javascript。该页面包含jQuery。所以将其添加到您的页面

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

您必须使用inner_element。因为背景适用于内心。如果我们更改$（＆＃39;＃right＆＃39;）的高度，您将看不到它。

Answer 4

是的，您可以使用jquery执行此操作，您可以使用.height()来获取最小内容的高度

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

使用javascript或css自动高度div

4 个答案: