33048


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

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

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

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

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


CC BY-SA 3.0
2017-03-02T07:23:40.110
33037
2017-03-02T13:45:34.927
20135
question
jquery css
子要素の高さが親要素の高さを超えた時という指定について


中身の高さを `$('#content').innerHeight()` で取得しようとしていますが、ここで言う  
inner は border を除いた高さという意味で、子要素群の本来の高さでは **ありません** 。 `#content` には `height:
100%` が指定されているので、その値が得られるだけです。

この場合、次のように「高さ固定の要素」と「子要素群」の間に、「高さ可変の要素」を挟むことで、その要素の高さから子要素群の高さを取得することができます。

[code]

    outer (height: 任意; overflow: hidden)
    |- inner (height: auto; overflow: 任意;)
       |- child1
       |- child2
       |- ...
    
[/code]

`#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/>


CC BY-SA 3.0
2017-03-02T13:45:34.927
33048
2017-03-02T13:45:34.927
8000
33037
answer