匹配元素高度

Question

我在滑块左侧有一个菜单。滑块的高度与其加载的图像文件的大小直接相关。我希望菜单的父元素始终与滑块处于同一高度。

我试着用CSS编码，我在这里四处张望，意识到用CSS来做是不可能的。所以，我试图用Java编写代码，但它不对。

任何帮助，这将是惊人的！

- 更新 -

这部分是编辑。我尝试了一些建议，但他们没有工作。滑块随着它响应屏幕宽度而改变高度。所以，当我拖出它时，它会改变，菜单比滑块短。如果我滑块的最大高度，宽度将不会显示在60％容差的100％处。

我相信我所需要的是jQuery的一个片断： - 抓住nav元素 - 检测.Slider 的高度 - 使导航元素相同的高度.Slider元素。

我已经尝试了下面的js代码，但它没有工作。

有谁知道如何做到这一点？

下面是代码：

window.jQuery(function() { 
 
    window.jQuery('nav').height(window.jQuery('.Slider').height()) 
 
    });

nav { 
 
    display: block; 
 
    float: left; 
 
    width: 40%; 
 
    height: 100%; 
 
} 
 
nav ul { 
 
    background: lightgreen; 
 
} 
 
nav ul li { 
 
    display: inline; 
 
    width: 100%; 
 
    height: 33.3333%; 
 
    margin-left: 0; 
 
} 
 
.Slider { 
 
    display: block; 
 
    float: right; 
 
    width: 60%; 
 
}

<div id="wrapper"> 
 
    <nav> 
 
    <ul> 
 
     <li> 
 
     Item 1 
 
     </li> 
 
     <li> 
 
     Item 2 
 
     </li> 
 
     <li> 
 
     Item 3 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
    <div class="Slider"> 
 
    Pics are here. 
 
    </div> 
 
</div>

Answer 1

我想你只需要一个clearfix，或者我不明白的问题。试试这个：

.theParent:after { 
    display: block; 
    clear: both; 
    content: ""; 
} 

Answer 2

不仅这是可能的CSS，有成千上万的方法来做到这一点。这只是其中的一个：

.wrapper { 
    background: lightgreen; 
    position:relative; 
    width:100%; 
    height:100%; 
    padding:0; 
} 
nav { 
    display: block; 
    float: left; 
    width:40%; 
    height:100%; 
    margin:0; 
    padding:0; 
} 
nav ul { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
nav ul li { 
    display: block; 
    width: 100%; 
} 
.Slider { 
    display: block; 
    float: right; 
    width: 60%; 
    margin:0; 
    padding:0; 
} 
.Slider img { 
    width:100%; 
    height:auto; 
} 
.clear { 
    display:block; 
    clear:both; 
    float:none; 
} 

，并在你的HTML一些微小的变化

<div class="wrapper"> 
    <nav> 
     <ul> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
     </ul> 
    </nav> 
    <div class="Slider"> 
     <img src="http://www.open.edu/openlearn/sites/www.open.edu.openlearn/files/design-nutshell-homepage.jpg" alt="" /> 
    </div> 
    <div class="clear"></div> 
</div> 

（注意是.clear DIV，这是最主要的原因，你可能有问题）

在这种情况下，由于我注意到您使用了百分比，因此我还添加了响应行为。

fiddle to see it in action

Answer 3

你可以用一点jQuery来解决这种情况。

的标记之前，您可以添加：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script> 
$('nav').css('height','100%'); 
</script> 

Answer 4

GOT IT !!!!所以friggin'现在快乐！

var maxHeight = 400; 

    $("div").each(function(){ 
    if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } 
    }); 

$("div").height(maxHeight);