問題タブ [equal-heights]

私はレスポンシブ レイアウトを持っています。そのためには、サイズ変更時に自動的に高さを変更する同じ高さの div が必要です。

このスクリプトで同じ高さを設定しています:

これが私のHTML構造です：

しかし、高さを設定すると、サイズ変更時にこの高さが維持され、サイズ変更時にサイズを再度変更する方法がわかりませんか?

ページの読み込み時に同じ高さを設定し、サイズ変更ごとに変更する必要があります。

誰でも助けることができますか？:)

私はliのulメニューを持っています:

ここで JSFiddle: http://jsfiddle.net/uvkQp/

すべての行に 3 つのトップ アイテムがあり、その下にサブアイテムがあり、その下にサブアイテムがある 3 つのトップ アイテムがあります。トップアイテムのliの高さが常に均一であることを取得するにはどうすればよいですか(その中に最も多くのサブアイテムがある最大の高さ)。

HTML:

CSS:

このフィドルをチェックしてください：

次のものが必要です。赤い列にはテキストがあり、黄色は動的コンテンツであり、緑には何もなく、色だけです。赤と緑の両方の列を黄色のコンテンツと同じ高さにしたい。height: 100%動作しませんでした

高さを本体の幅の 3 分の 1 に設定して 2 つの div を表示し、div が互いに一致するためにより多くのスペースが必要な場合は、これらの高さを一致させようとしています。同じ高さの柱のように。

これが私がこれまでに持っているものです：

これは幅を取得し、高さを完全に設定します。これで同じ高さのスニペットを使用しようとしましたが、まだ何も機能していません。

誰か提案があれば、ぜひ聞きたいです。

私が取り組んでいるアプリケーションでは、同じ高さの列が必要です。CSS を使用して、列項目をテーブルとしてスタイル設定することにしました。このようにして、各列の高さは実際に列の高さの中で最大になります。

ここで例を参照してください: http://jsfiddle.net/roelvd/GXe9m/

これで、各ブラウザーで各列の高さが実際に 100% になりました。ただし、各列の要素(私の場合は .container)も 100% にする必要があります。これは、Firefox と Chrome の両方で正常に機能します。ただし、IE10 (およびおそらく古い ID バージョン)にはありません。

HTML:

CSS:

したがって、私は実際に初めて同じ高さを使用しており、子 div (#sidebar) を親 div (#Content) の高さと一致させることに成功しています。ただし、すべてのページに余分なスペースが追加されています。コンテンツが増えると、垂直スクロールが長くなり、ページの下部にさらに大きな空きスペースが生じます。私が開発したカスタムの Wordpress テーマを使用しているので、おそらく問題はそこにあるのでしょう。私が現在使用しているコードは以下のとおりです。

<script type="text/javascript"> $(function(){ $('#Content').equalHeights(); }); </script>

サイトへのリンクは次のとおりです: http://fentonauto.com/web/category/sales/

あなたが提供できるガイダンスを事前にありがとう！

ねえ、CSS-tricks Chris Coyier によるこの甘い jquery スニペットを見つけました。これは、ページの同じ上部位置を共有する (同じ行にある) div 要素の高さを最も高い要素にリセットします。

問題 この解決策は流動的な幅のレイアウトでほとんど機能し、上部の位置が変更されると高さをリセットしますが、ページが最初に読み込まれたときの行の現在の最も高い要素の元の高さにリセットします。em などの相対単位の使用または段落でのワード ラップが原因で、このページが最初に読み込まれてから、最も高い要素の高さが変更された可能性があるため、これは問題です。 提案され た解決策 解決策は、行の要素の高さを元の高さではなく、最も高い要素の現在の高さに設定することです。私はこれを達成することに失敗しました。

「li.half」が比較およびサイズ変更される要素であるスニペットを次に示します。

ウィンドウのサイズ変更時にsetConformingHeightを調整する方法を理解できるかどうか教えてください。

ありがとう！