0

お世話になっております。

現在シングルページでスクロールするサイトを作っており
常にページごとにブラウザの画面100%で見せるデザインにしています。(cssで親要素のwidth,heightを100%に)

リサイズした際、可変で横並びの要素が縦になったりで、中身の要素がブラウザの表示領域を超えた時に、height:100%をautoにし、ページの100%表示を解除したいのですが、jqueryの指定の仕方がよくわかりません。

お手数ですが、わかる方いらっしゃいましたらご教授ください。

https://fiddle.jshell.net/kxzooLxL/
簡易的にレイアウトしました。

1 件の回答 1

0

中身の高さを $('#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% を足すとよいでしょう。

https://fiddle.jshell.net/mzfpb7ju/1/

ところで、後者(min-heightを使った構成)からouterの overflow: hidden を取り除くと、JavaScriptなしでお望みの挙動が得られるように思います。

https://fiddle.jshell.net/ofms9haq/1/

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。