質問: お世話になっております。 現在シングルページでスクロールするサイトを作っており 常にページごとにブラウザの画面100%で見せるデザインにしています。(cssで親要素のwidth,heightを100%に) リサイズした際、可変で横並びの要素が縦になったりで、中身の要素がブラウザの表示領域を超えた時に、height:100%をautoにし、ページの100%表示を解除したいのですが、jqueryの指定の仕方がよくわかりません。 お手数ですが、わかる方いらっしゃいましたらご教授ください。 簡易的にレイアウトしました。
回答: 中身の高さを `$('#content').innerHeight()` で取得しようとしていますが、ここで言う inner は border を除いた高さという意味で、子要素群の本来の高さでは**ありません**。 `#content` には `height: 100%` が指定されているので、その値が得られるだけです。 この場合、次のように「高さ固定の要素」と「子要素群」の間に、「高さ可変の要素」を挟むことで、その要素の高さから子要素群の高さを取得することができます。 ``` outer (height: 任意; overflow: hidden) |- inner (height: auto; overflow: 任意;) |- child1 |- child2 |- ... ``` `#content` を上記outerとするなら、上記inner+display:flexな要素を挟めばよいです。 あるいは `#container` をouter、 `#content` をinnerとする場合、`#content` から `height` を取るだけでは横並びの時に高さが足りなくなるので `min-height: 100%` を足すとよいでしょう。 ところで、後者(min-heightを使った構成)からouterの `overflow: hidden` を取り除くと、JavaScriptなしでお望みの挙動が得られるように思います。