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

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

ただいまの
回答率

89.99%

css 要素を画面外に溢れさせ、スクロールで表示させたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,615

akao

score 51

右下に要素を表示した時に、画面を右下から縮めていき、一定の大きさまで画面が小さくなったら、要素を画面外に残して溢れさせたいです。

例えば

<div class="window">

    <div class="rectangle">


    </div>

</div>
.window{
    .rectangle{
        position: absolute;
        bottom: 0px;
        right: 0px;
        border: solid 1px #4a4a4a;
        width: 20vw;
        height: 20vw;
        min-width: 200px;
        min-height: 200px;
    }
}

このようなコードでは、画面を右下から縮めていった時、いつまでもrectangleは画面の右下にくっついてしまいますが、一定の大きさまでwindowを小さくしたら、rectangleを置いけぼりにしたいです。

@media screen and (max-width:1024px) {
    .window{
        .rectangle{
            position: relative;
        }
    }
}

このようなスタイルを加えたら、rectangleを溢れさせるようにはできるんですが、右下に維持しつつ置いてけぼりにできるわけじゃないので、理想の動きにはなりません。
どのようにすればいいでしょうか。

-追記-
スクロールが効かないのはノーマライズのcssが原因でした。
申し訳ございません。
ただこれのどれが原因なのかはまだ分かりません。

分かりました

/*! normalize.scss v0.1.0 | MIT License | based on git.io/normalize */

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0;
    overflow: hidden; //これのせい
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],
template {
    display: none
}

a {
    background-color: transparent;
    text-decoration: none
}

a:active,
a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: 0.67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: bold
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,
th {
    padding: 0
}

/*input type numberのスピンボタン消す*/

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

こういうことでしょうか?
https://jsfiddle.net/pcwudrmc/50061/

$mw: 500px !default;
@media screen and (max-width: ($mw)) {
  .window{
    .rectangle{
      left: calc(#{$mw} - 20vw);
    }
  }
}

$mh: 500px !default;
@media screen and (max-height: ($mh)) {
  .window {
    .rectangle {
      top: calc(#{$mh} - 20vw);
    }
  }
}

スクロールバーが出ちゃうのではみ出すときにガタつきますが。
SCSSに慣れてないので書き方はイマイチかもしれませんがご容赦ください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/09/10 11:22 編集

    丁寧に回答くださったのに返事が遅れてしまい、大変申し訳ございません。
    やりたかった動きになってます。
    ただ他の所にも応用したいので、コードの理解をしたいのですが少し難しいです....。
    まず、変数$mwと$mhにはおいてけぼりを発動したい時のウィンドウの横幅と縦幅をそれぞれ入れるのでしょうか。

    キャンセル

  • 2018/09/10 11:43

    あとJsFiddleでは画面のスクロールが効くのに効かないです...

    キャンセル

  • 2018/09/10 11:55

    ノーマライズのcssが原因でした、すみません

    キャンセル

  • 2018/09/10 11:57

    理屈もなんとなく分かって来ました。

    (画面の高さ - 溢れさせたい要素の高さ) をtopにすることで、下方向に溢れさせてるのですね。
    すごいです。

    キャンセル

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

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