Не удается разместить нижний колонтитул в нижней части страницы в Vue SPA - PullRequest
Новая
       0

Не удается разместить нижний колонтитул в нижней части страницы в Vue SPA

0 голосов
/ 14 февраля 2020

У меня проблема с добавлением нижнего колонтитула на моем сайте. Пожалуйста, взгляните на эту картинку.

problem image

Я уже слежу за ответом на этот вопрос , но он все еще не приводит к тому, что Я хотел.

Понятия не имею, почему это произошло, но когда я использую Chrome Devtools и завис над телом, его высота фиксируется на 100% области просмотра, а не на содержимом.

Мне нужно, чтобы рост был установлен в процентах, потому что некоторые секции используют проценты для своего роста. Когда я использую height: auto в теле, высота каждой секции искажена, но проблема нижнего колонтитула устранена. Как я могу это исправить?

Пожалуйста, посмотрите на мои сценарии ниже:

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <title>{{ env('APP_NAME', 'Prisma') }}</title>

        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    </head>
    <body>
        <main id="app">
            <App></App>
        </main>

         <footer id="footer">
             <div class="row">
                 <div class="col-md-7">
                     <div class="textbox">
                         <img src="../../images/footer-logo.svg" alt="Prisma Logo"
                             class="img-fluid company-footer-logo" />
                         <p class="company-description">
                             Prisma adalah sebuah badan usaha startup yang menyediakan layanan dan produk - produk
                             <br />berkualitas guna mendukung bisnis dan usaha anda dan mengembangkan potensi - potensi
                             yang ada
                             <br />dalam industri digital dan cyber security di Indonesia.
                         </p>
                     </div>
                     <nav class="bottom-navs">
                         <div class="row">
                             <div class="col-md-4">
                                 <ul class="list-unstyled list-bottom-nav">
                                     <li class="list-bottom-nav-item heading">Navigasi</li>
                                     <li class="list-bottom-nav-item">
                                         <a href="#">Beranda</a>
                                     </li>
                                     <li class="list-bottom-nav-item">
                                         <a href="#">Produk</a>
                                     </li>
                                     <li class="list-bottom-nav-item">
                                         <a href="#">Layanan</a>
                                     </li>
                                     <li class="list-bottom-nav-item">
                                         <a href="#">Tentang</a>
                                     </li>
                                 </ul>
                             </div>
                             <div class="col-md-4">
                                 <ul class="list-unstyled list-bottom-nav">
                                     <li class="list-bottom-nav-item heading">Sosial</li>
                                     <li class="list-bottom-nav-item">
                                         <a href="#">Prisma Blog</a>
                                     </li>
                                     <li class="list-bottom-nav-item">
                                         <a href="#">Facebook</a>
                                     </li>
                                     <li class="list-bottom-nav-item">
                                         <a href="#">Twitter</a>
                                     </li>
                                     <li class="list-bottom-nav-item">
                                         <a href="#">Instagram</a>
                                     </li>
                                 </ul>
                             </div>
                             <div class="col-md-4">
                                 <ul class="list-unstyled list-bottom-nav">
                                     <li class="list-bottom-nav-item heading">Resources</li>
                                     <li class="list-bottom-nav-item">
                                         <a href="#">Kebijakan &amp; Privasi</a>
                                     </li>
                                     <li class="list-bottom-nav-item">
                                         <a href="#">Syarat &amp; Ketentuan</a>
                                     </li>
                                     <li class="list-bottom-nav-item">
                                         <a href="#">Aturan Keanggotaan</a>
                                     </li>
                                 </ul>
                             </div>
                         </div>
                     </nav>
                 </div>
                 <div class="col-md-5">
                     <div class="textbox">
                         <h2 class="title font-weight-bold">Stay Up To Date!</h2>
                         <p class="subtitle">
                             Ikuti terus perkembangan kami dan dapatkan promo - promo
                             <br />menarik buat kamu yang hype abis!
                         </p>
                         <form action="/subscribe" method="POST">
                             <div class="input-group mb-3">
                                 <input type="email" class="form-control" placeholder="Berlangganan via Email"
                                     aria-label="Berlangganan via Email" aria-describedby="subscribe-button" />
                                 <div class="input-group-append">
                                     <button class="btn btn-primary" type="button"
                                         id="subscribe-button">Berlangganan</button>
                                 </div>
                             </div>
                         </form>
                     </div>
                 </div>
             </div>
         </footer>
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

App.vue

<template>
  <div class="__wrapper">
    <navigation-bar v-if="!$router.currentRoute.path.includes('dashboard')"></navigation-bar>
    <router-view></router-view>
  </div>
</template>

app.scss

@import 'mixins';

// Variables
@import 'variables';

// Fontawesome
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
@import "~@fortawesome/fontawesome-free/scss/brands.scss";
@import "~@fortawesome/fontawesome-free/scss/regular.scss";

// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~slick-carousel/slick/slick.css';

// Built-in vue-range-slider style
@import '~vue-range-slider/dist/vue-range-slider.scss';

// Components
@import 'shadow';
@import 'footer';

html,
body,
#app,
.__wrapper {
    position: relative;
    height: 100%;
    scroll-behavior: smooth;
}

.btn {
    padding: 1rem 2rem;
    border-radius: 10px;
}

@media (min-width: 1367px) {

    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1670px;
    }
}

footer.scss

#footer {
    width: 100%;
    position: absolute;
    bottom: 0%;
    left: 0;
    padding: 200px;
    background-color: #eef2fa;

    @media only screen and (max-width: 1366px) {
        padding: 100px;
    }

    .textbox {
        margin-bottom: 150px;

        .company-footer-logo,
        .title,
        .subtitle {
            margin-bottom: 50px;
        }
    }

    .bottom-navs {
        .list-bottom-nav {
            .list-bottom-nav-item {
                margin-bottom: 20px;

                a {
                    color: #99a3ba;
                }
            }

            .list-bottom-nav-item.heading {
                font-weight: bold;
            }
        }
    }

    .input-group .form-control {
        height: calc(2.6em + 1rem + 2px);
        border-radius: 10px;
        padding-right: 15px;

        &:focus {
            z-index: unset;
        }
    }

    .input-group-append .btn {
        position: relative;
        border-radius: 10px;
        margin-left: -15px;
        z-index: 1;
    }
}

РЕДАКТИРОВАТЬ

Вот сценарий, который показан на рисунке: Services.vue

<template>
  <div id="services" class="services-page">
    <header id="svc-hero">
      <div class="container h-100">
        <div class="row h-100">
          <div class="col-lg-6 d-flex align-items-center">
            <div class="svch-textbox">
              <h1 class="svch-title">
                Tingkatkan
                <span class="text-primary">
                  Potensi
                  <br />Bisnis
                </span>
                Dengan Aplikasi
              </h1>
              <p class="svch-subtitle">
                Tahukah anda bahwa 80% dari perusahaan diseluruh dunia meningkatkan
                potensi bisnisnya melalui aplikasi dan media sosial.
                Kamu juga bisa loh!
              </p>
              <div class="row no-gutters">
                <div class="col-md-5 pr-2">
                  <button class="btn btn-primary btn-block">Temukan Aplikasi</button>
                </div>
                <div class="col-md-5">
                  <a href="#capr-form" class="btn btn-outline-primary btn-block">Request Aplikasi</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <section class="applications">
      <div class="container-fluid h-100">
        <div class="row no-gutters">
          <div class="col-lg-6 bg-primary">
            <div class="digital-product-image-wrapper">
              <img
                src="../images/team-discussion-illustration.svg"
                alt="PrismaHR team discussion illustration"
                class="img-fluid illustration"
              />
            </div>
          </div>
          <div class="col-lg-6 d-flex align-items-center">
            <div class="digital-product-textbox">
              <h2 class="title">
                Permudah
                <br />Manajemen Karyawan Dengan
                <span class="text-primary">
                  Prisma
                  <sup class="text-muted font-weight-light">HR</sup>
                </span>
              </h2>
              <p class="subtitle">
                Atur seluruh keperluan kepegawaian bisnis usaha anda
                <span class="text-primary">
                  mulai
                  dari pendataan, payroll hingga otomasi sistem absensi
                </span>
                cukup dengan satu aplikasi.
              </p>
              <button type="button" class="btn btn-primary">Coming Soon</button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="custom-app-request-form">
      <div class="row no-gutters">
        <div class="col-lg-6 d-flex justify-content-center align-items-center">
          <form action="/request-custom-app" id="capr-form" method="POST">
            <div class="card border-0">
              <div class="card-body">
                <div class="form-group">
                  <label for="name">Nama</label>
                  <input name="name" type="text" class="form-control" placeholder="John Doe" />
                </div>
                <div class="form-group">
                  <label for="email">Alamat Email</label>
                  <input
                    name="email"
                    type="text"
                    class="form-control"
                    placeholder="john.doe@example.com"
                  />
                </div>
                <div class="form-group">
                  <label for="contact">Nomor Whatsapp Aktif</label>
                  <input
                    name="contact"
                    type="number"
                    class="form-control"
                    placeholder="0821xxxxxxxx"
                  />
                </div>
                <div class="form-group">
                  <label for="company">Gambaran Aplikasi</label>
                  <textarea
                    name="application_details"
                    class="form-control"
                    id="application-details"
                    rows="10"
                    placeholder="Ceritakan seperti apa aplikasi yang ingin dibuat (lampirkan link referensi bila ada)"
                  ></textarea>
                </div>
                <div class="form-group my-5">
                  <label for="company" class="d-block text-center mb-3">Sesuaikan Budget</label>
                  <range-slider class="slider" min="1" max="3" step="1" v-model="sliderValue"></range-slider>
                  <span class="form-text d-flex justify-content-between align-items-start">
                    <p>Dibawah 10.000.000</p>
                    <p>10.000.000</p>
                    <p>Diatas 10.000.000</p>
                  </span>
                </div>
                <div class="text-right">
                  <button type="submit" class="btn btn-primary">Request Aplikasi</button>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="col-lg-6 position-relative">
          <div class="custom-app-request-form-textbox">
            <h2 class="title">
              Buat idemu
              <br />jadi karya yang nyata!
            </h2>
            <p class="subtitle">
              Buat permintaan aplikasi custom sesuai kebutuhanmu atau perusahaanmu dengan biaya
              yang dapat dinegosiasikan secara langsung.
            </p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  import RangeSlider from "vue-range-slider";
  export default {
    components: {
      RangeSlider
    }
  };
</script>

<style lang="scss" scoped>
  @import "../sass/variables";

  #services {
    height: 100%;

    #svc-hero {
      height: 100%;
      align-items: center;
      background: url("../images/service-hero-image.svg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      margin-bottom: 300px;

      &::before {
        content: url("../images/pseudo-grid.svg");
        position: absolute;
        bottom: 0%;
        left: 0%;
      }

      &::after {
        content: url("../images/pseudo-grid.svg");
        position: absolute;
        top: 25%;
        left: 55%;
        transform: translate(-50%, -50%);
      }

      .svch-title {
        font-weight: bold;
        font-size: 55px;
        line-height: 83px;
        text-transform: capitalize;
        margin-bottom: 30px;

        @media only screen and (max-width: 1366px) {
          font-size: 38px;
          line-height: unset;
        }
      }

      .svch-subtitle {
        margin-bottom: 40px;
        line-height: 30px;
      }
    }

    .applications {
      .container-fluid {
        padding: 0;

        .digital-product-image-wrapper {
          position: relative;
          text-align: right;
          margin: 160px 0px;

          &:before {
            content: "";
            position: absolute;
            top: -35%;
            left: 0;
            height: 150%;
            width: 105%;
            background-color: #eef2fa;
            z-index: -1;
          }

          &::after {
            content: url("../images/pseudo-grid.svg");
            position: absolute;
            bottom: -30%;
            right: -20%;
            z-index: -1;
          }
        }

        .digital-product-textbox {
          padding: 0px 400px 0px 200px;

          @media only screen and (max-width: 1920px) {
            padding: 100px;
          }

          .title {
            font-size: 55px;
            font-weight: bold;
            letter-spacing: 1.1px;
            text-transform: capitalize;
            @media only screen and (max-width: 1366px) {
              font-size: 38px;
              line-height: unset;
            }
            line-height: 80px;
            margin-bottom: 50px;
          }
          .subtitle {
            line-height: 30px;
            margin-bottom: 60px;
          }
        }
      }

      &:nth-child(odd) {
        .digital-product-image-wrapper {
          text-align: left;

          &:before {
            left: -5% !important;
            left: 0;
          }

          &::after {
            bottom: -30%;
            left: -20%;
          }
        }
      }
    }
  }

  #custom-app-request-form {
    position: relative;
    padding: 100px 0px;
    background-color: $primary;

    @media only screen and (max-width: 1366px) {
      padding-bottom: 0px;
    }

    &::before {
      content: url("../images/pseudo-grid-white.svg");
      position: absolute;
      bottom: 3%;
      right: 1%;
    }

    .custom-app-request-form-textbox {
      padding: 200px;
      color: white;

      .title {
        font-size: 55px;
        font-weight: bold;
        letter-spacing: 1.1px;
        text-transform: capitalize;
        @media only screen and (max-width: 1366px) {
          font-size: 38px;
          line-height: unset;
        }
        line-height: 80px;
        margin-bottom: 50px;
      }
      .subtitle {
        line-height: 30px;
        margin-bottom: 60px;
      }
    }

    .custom-app-request-form-promo-card-wrapper {
      display: flex;
      position: absolute;
      padding: 200px 0px;
    }

    @media only screen and (max-width: 1920px) {
      .custom-app-request-form-textbox {
        padding: 200px 100px;
      }
    }

    #capr-form {
      width: 80%;

      .card {
        border-radius: 20px;
        box-shadow: 3px 3px 24px #0000004d;
      }

      .card .card-body {
        padding: 4rem;

        label {
          font-weight: bold;
        }

        .form-group {
          margin-bottom: 30px;
        }

        .form-control {
          border-top: none;
          border-left: none;
          border-right: none;
          border-radius: 0px;
          border-width: 2px;
          outline: none !important;
          box-shadow: none !important;
        }

        .form-control:not(textarea) {
          height: 55px;
        }
      }
    }
  }
</style>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...