rails 画面全体に背景

Question

画面全体に背景を設定したいのですが、なぜか高さがboxshadowで指定した500px分しか適用されていません。真ん中部分にだけ紫色の背景が適用され、上、下の部分が白くなってしまいます。原因わかる方いませんか？

新規登録時のビュー

.newreg
  .newregstr
    %h2.sign-up aaaaa
    %h5 新しいアカウント作成
    = form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
      = render "devise/shared/error_messages", resource: resource
      .field
        -# = f.label :email
        %br/
        = f.email_field :email, autofocus: true, autocomplete: "email",placeholder: "メールアドレス"
      .field
        -# = f.label :password
        - if @minimum_password_length
          %em
            (#{@minimum_password_length} characters minimum)
        %br/
        = f.password_field :password, autocomplete: "new-password",placeholder: "パスワード"
      .field
        -# = f.label :password_confirmation
        %br/
        = f.password_field :password_confirmation, autocomplete: "new-password",placeholder: "パスワード確認"
      .actions
        = f.submit "Sign up"
    = render "devise/shared/links"

新規登録時のcss

.newreg{
  background-color: #F3EBF6;
  height: 100%;
  width: 100%;
  // background-image: url("back.jpeg");
  background-position: center;
  // position: relative;
  .newregstr{
    text-align: center;
    margin: 100px auto 0;
    font-size: 16px;
    // position: absolute;
    // background-color: #FFFFFF;
    width: 500px;
    height: 500px;
    margin: 7em auto;
    border-radius: 1.5em;
    box-shadow: 0px 11px 35px 2px rgba(0, 0, 0, 0.14);
    // background-image: url("back.jpeg");
    .sign-up{
      padding-top: 40px;
      // color: #8C55AA;
      color: white;
      font-family: 'Ubuntu', sans-serif;
      font-weight: bold;
      font-size: 40px;
      // transform: rotate( 5deg );
      font-family: 'Homemade Apple', cursive;
      .field{ 
        padding-top: 10px;
      #user_email{
          line-height: 40px;
        }
        #user_password{
          line-height: 40px;
        } 
      }
    }
  }
}
.new_session{
  text-decoration: none;
  line-height: 40px;
  border: solid 1px white;
  padding: 0 55px;
  margin-top: 20px;
  font-size: 20px;
  color: black;
  background-color: white;
}

原因特定できないので探索中です。

追記

min-height:100vh;に変更したところ以下のように表示

Answer 1

railsには明るくないので、断定はできないのですが、
SCSSを読む限りでは、
.newreg　に指定されている　height: 100%;　では多分、画面全体の高さまで　.newreg 要素の高さが及ばず、子要素である .newregstr の高さ（500px）分しか、領域がないため、背景画像が画面全体に及ばない、という結果になっていると思います。
HTMLでbodyに当たる要素に紫色の背景色を設定するか、
.newreg の height: 100%;　を　min-height: 100vh; と書き換えれば、画面の高さ分、.newreg 要素の領域が及ぶようになると思います。

2020/03/16追記
.newreg　の上下に空白ができているのを見落としていました。（すみません）

.newreg {
min-height: 100vh;
padding-top: 1px;/*これを新たに追加*/
}

こちらで、上側の空白が埋まると思います。
上側の空白の理由は、子要素の.newregstr の上マージン分、.newreg 要素の背景の領域が下がっているためだと思います。
そういう場合、親要素にpaddingで、1pxでもいいので空白を与えてやると、解消できます。

Comments

[退会済みユーザー]

変更しましたが変化が下の部分にしか適用されていません

[marlboro_tata]

おおお、すみません、画像の上側にも白空間があるのを見落としてました。
.newreg　のCSSルールセットに
padding-top: 1px;
を追加で、治ると思います。