質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.45%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

10101閲覧

CSSで真ん中に置きながら、スクロールで全て見えるようにできませんか?

twentytwenty

総合スコア6

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/11/30 21:11

###実現したいこと
高さ不定の.contentsについて、それを.modalの真ん中に置きつつ、.modalのスクロールで全て見えるようにしたいです。

###発生している問題
.contentsdisplay:flex;等で真ん中に置きました。
しかし.contentsが画面の高さを超えると、上の方が見えなくなってしまいます。

Jsfiddleでのデモ

###該当のソースコード
このような簡単なコードですが、問題の解決が大変困難です。

html

1<div class="modal"> 2 <div class="contents"></div> 3</div>

css

1.modal { 2 position: fixed; 3 top: 0; right: 0; bottom: 0; left: 0; 4 width: 100vw; 5 z-index: 100; 6 display: flex; 7 align-items: center; 8 justify-content: center; 9 overflow: hidden scroll; 10 background: green; 11} 12.contents { 13 position: relative; 14 width: 200px; 15 height: 1000px; /* 高さは不定 */ 16 padding: 0 10px; 17 background: lime; 18 display: flex; 19 align-items: center; 20 justify-content: center; 21}

###試したこと【CSS編】
まずdisplay:flex;をやめ、真ん中に置く他の方法としてCSSのvertical-alignおよびtransformプロパティを試しました。

しかしやはり上の方が見えなくなってしまうことは変わりありませんでした。

###試したこと【JS編】
次にJSで「.contentsの高さを測り、画面の高さを超えた場合にだけ.modalalign-items: center;を外す」という方法を試しました。

これで問題はなんとか解決はしたのですが、これをCSSで実現できないかと思い質問させて頂きました。

下は見えるのに上が見えなくなってしまう原因も知りたいです。
宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/11/30 21:28

「JavaScript」もタグに追加しておいてください。
s8_chu

2019/11/30 21:34

今回の質問内容を読む限り、 JavaScript タグは必要ないと思います。
twentytwenty

2019/11/30 23:13

s8_chuさまの仰る通りで、JavaScript の解決方法は求めてないので付けませんでした。
guest

回答2

0

ベストアンサー

flex 行における交叉サイズが flex アイテムよりも小さい場合に、 flex アイテムが両方向に均等にはみ出すためです。自動マージンによる整列を行うことで、質問文に書かれている問題は改善します (動作確認用リンク)。

§ 8.3. Cross-axis Alignment: the align-items and align-self properties

'center'
The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.)

CSS

1.modal { 2 position: fixed; 3 top: 0; 4 right: 0; 5 bottom: 0; 6 left: 0; 7 width: 100vw; 8 z-index: 100; 9 display: flex; 10 overflow: hidden scroll; 11 background: green; 12} 13 14.contents { 15 position: relative; 16 width: 200px; 17 height: 1000px; 18 padding: 0 10px; 19 background: lime; 20 display: flex; 21 align-items: center; 22 justify-content: center; 23 margin: auto; /* 追記 */ 24} 25 26.scale { 27 position: absolute; 28 right: -30px; 29}

投稿2019/11/30 21:51

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

twentytwenty

2019/11/30 23:12

これは…さすが総合1位さまですね。どうもありがとうございました!
twentytwenty

2019/12/01 00:34

たびたび失礼致します。 .contentsの上下に余白をもたせることはできませんでしょうか? 頂いた「動作確認用リンク」に .modal { padding: 50px 0; } を追加すると、上にしか余白ができないのです。 もしわかりましたらお手数ですが今一度ご返信頂けましたら幸いです。
s8_chu

2019/12/01 02:00

ブラウザ間のスクロールモデルの実装の食い違いが原因です。仕様が安定し、実装が統一されるまでは、 `after` 擬似要素を用いて padding 分の高さを確保するか、最後の子要素へ margin を追加するなど、 padding 以外の方法で空間を確保する必要があります。
twentytwenty

2019/12/01 11:02

なるほど。迅速で的確な解決策をどうもありがとうございました。
guest

0

こういうこと
ですか?
max-heightで、画面の高さ以上の高さにしないようにしました。
違っていたらすいません。

投稿2019/11/30 21:46

aoies

総合スコア331

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

twentytwenty

2019/11/30 23:15

わかりづらくて申し訳ございません。実現したいことは「>.modalのスクロールで全て見えるようにしたい」という感じでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問