匹配元素高度

我在滑塊左側有一個菜單。滑塊的高度與其加載的圖像文件的大小直接相關。我希望菜單的父元素始終與滑塊處於同一高度。匹配元素高度

我試着用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>

來源

2014-09-29 Blue

我想你只需要一個clearfix，或者我不明白的問題。試試這個：

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

來源

2014-09-29 19:07:05 Zenorbi

不僅這是可能的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

來源

2014-09-29 19:08:11 Devin

你可以用一點jQuery來解決這種情況。

的標記之前，您可以添加：

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

來源

2014-09-29 19:36:55 Gerardpp

GOT IT !!!!所以friggin'現在快樂！

var maxHeight = 400; 

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

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

來源

2014-09-29 20:48:59 Blue

匹配元素高度

回答

相關問題