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

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

ただいまの
回答率

87.49%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 4,052

score 6

実現したいこと

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

発生している問題

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

Jsfiddleでのデモ

該当のソースコード

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

<div class="modal">
    <div class="contents"></div>
</div>
.modal {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100vw;
    z-index: 100;
    display: flex;
    align-items: center;        
    justify-content: center;
    overflow: hidden scroll;
    background: green;
}
.contents {
    position: relative;
    width: 200px;
    height: 1000px; /* 高さは不定 */
    padding: 0 10px;
    background: lime;
    display: flex;
    align-items: center;
    justify-content: center;
}

試したこと【CSS編】

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

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

試したこと【JS編】

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

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/12/01 06:28

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

    キャンセル

  • s8_chu

    2019/12/01 06:34

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

    キャンセル

  • twentytwenty

    2019/12/01 08:13

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

    キャンセル

回答 2

checkベストアンサー

+4

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.) 

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  z-index: 100;
  display: flex;
  overflow: hidden scroll;
  background: green;
}

.contents {
  position: relative;
  width: 200px;
  height: 1000px;
  padding: 0 10px;
  background: lime;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto; /* 追記 */
}

.scale {
  position: absolute;
  right: -30px;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/01 08:12

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

    キャンセル

  • 2019/12/01 09:34

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

    キャンセル

  • 2019/12/01 11:00

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

    キャンセル

  • 2019/12/01 20:02

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/01 08:15

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

    キャンセル

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

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る