Question

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

我尝试用CSS编写代码，然后我在这里查看并意识到用CSS做这件事是不可能的。所以，我尝试用Java编写它，但它不对。

对此的任何帮助都会很棒！

- 更新 -

这部分是一个编辑。我尝试了一些建议，但它们没有用。滑块在响应屏幕宽度时会改变高度。因此，当我将其拖出时，它会改变，菜单会比滑块短。如果我将滑块的最大高度设置为宽度，则不会显示宽度为60％的100％。

我相信我需要的是一段jquery： - 抓取nav元素 - 检测.Slider的高度 - 使nav元素与.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＆＃39;快乐吧!!

var maxHeight = 400;

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

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

匹配元素高度

4 个答案: