使用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

回答

相关问题