0

jQuery Cycle Lite プラグインをシンプルなリキッド レイアウトと組み合わせたいと思っています。

私の問題は、スライドショーの下のコンテンツがその下に消えることです。スライドショー JS がアクティブな場合、スライドショーを含む div の高さが 0px のようです。スライドショー コードを削除すると (代わりに静止画像を使用すると)、div はその中の画像によって正しい高さにプッシュされます。

スライドショー自体はリキッド レイアウトに合わせてスケーリングされるため、スライドショーの高さを px で指定することはできません。誰でも回避策を提案できますか?

コードは以下にありますが、http://jsbin.com/ubufi5/editで私が取り組んできた例を見ると役立つかもしれません。

読んでくれてありがとう！

HTML/CSS:

<head>
  <meta charset="utf-8" />
  <title>Slideshow in a liquid layout</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  <script type="text/javascript" src="http://misc.somnambulist.org/jquery.cycle.lite.1.0.js"></script>

  <style type="text/css">
    body { max-width: 1120px;  margin: 100px auto; border: 1px solid #ff0; background: #666;}
    body img { width: 100%; }
  </style>
</head>
<body id="home">
  <h1>Test</h1>
  <div id="slidebox">
    <img src="http://misc.somnambulist.org/test2.jpg" />
    <img src="http://misc.somnambulist.org/test4.jpg" />
  </div>
  <h2>Lots of text here so it clears the image</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

JS:

$(function() {
  $('#slidebox').cycle();
});
4

2 に答える 2

1

#slideboxロード時に最も高い画像をチェックし、ウィンドウのサイズが変更されたときにそれに応じてdivの高さを維持する以下のjQueryを使用してこれを解決しました（ここの例）が、この質問はしばらく開いたままにしておきます私がどういうわけか見落としているいくつかの驚くほど基本的なCSSのこと、または少なくとも私がこの問題に遭遇している理由についての説明があることを願っています。

function SetHeightToTallestChild(i) {
  var tallest = 0;
  $(i).children().each(function(){
    var h = $(this).height();
    if(h > tallest)
      tallest = h;
  });
  $(i).height(tallest);
}

$(document).ready(function() {
  SetHeightToTallestChild('#slidebox');
  $(function() {
      $('#slidebox').cycle();
  });  
  $(window).resize(function() {
    SetHeightToTallestChild('#slidebox');
  });
});
于 2011-02-25T14:11:38.197 に答える
0 
body {
overflow:  auto;
min-height: 100%;
}
于 2011-02-25T12:40:56.023 に答える