Saya akan memilih desain minimalis yang dibuka dengan pengantar halaman penuh. Pengenalan ini berada di .front-page div yang mencakup 100% layar yang tersedia.

Lalu ada div lain yang seharusnya berada di bawah .front-page saat Anda menggulir ke bawah, tetapi untuk beberapa alasan ia berada di position 0 di bagian atas layar, benar-benar tersembunyi di balik div .front-page .

Saya tahu jika saya mau, saya bisa memposisikannya secara manual tetapi itu praktik pengkodean yang buruk. Harus ada solusi sederhana yang saya abaikan.

body {
  display: flex;
  flex-direction: column;
}

header {
  font-family: "Architects Daughter", cursive;
  text-align: center;
  height: 50%;
}

.arrow {
  font-size: 2em;
  visibility: hidden;
}

.front-page {
  background-color: lightseagreen;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 7;
  display: block;
}

.social-bar {
  height: auto;
}

.social-bar a {
  padding: 0 5px 0 5px;
}

.scrolling {
  display: flex;
}

@media only screen and (min-width: 701px) {
  .arrow {
    visibility: visible;
  }
}
<!-- Head -->
<script src="https://kit.fontawesome.com/bfd52c390d.js" crossorigin="anonymous"></script>


<!-- Body -->
<div class="front-page">
  <div class="intro">
    <header>
      <h1>Guinevere <br> E. <br> Mayberry</h1>
      <h4>Front-End Web Development &mdash; Largo, Florida</h4>
    </header>

    <!-- Load external JavaScript -->
    <script src="scripts.js"></script>

    <div class="social-bar">
      <a href="#" class="facebook"><i class="fab fa-facebook"></i></a>
      <a href="#" class="linkedin"><i class="fab fa-linkedin"></i></a>
      <a href="#" class="pillowfort"><i class="fas fa-blog"></i></a>
    </div>
    <i class="fas fa-arrow-alt-circle-down"></i>
  </div>
</div>

<div class="scrolling">
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
</div>
1
Gwen Mayberry 18 September 2021, 00:03

3 jawaban

Jawaban Terbaik

Pendekatan mudah akan menggunakan position: relative alih-alih absolute sehingga area rentang div lainnya dihormati dan jika Anda ingin layar penuh .front-page gunakan width: 100vw; height: 100vh; else using height: 100% hanya untuk area konten

body {
  display: flex;
  flex-direction: column;
}

header {
  font-family: "Architects Daughter", cursive;
  text-align: center;
  height: 50%;
}

.arrow {
  font-size: 2em;
  visibility: hidden;
}

.front-page {
  background-color: lightseagreen;
  width: 100vw;/*so that covers full screen width*/
  height: 100vh;/*so that covers full screen height*/
  position: relative;
  z-index: 7;
  display: block;
}

.social-bar {
  height: auto;
}

.social-bar a {
  padding: 0 5px 0 5px;
}

.scrolling {
  display: flex;
}

@media only screen and (min-width: 701px) {
  .arrow {
    visibility: visible;
  }
}
<!-- Head -->
<script src="https://kit.fontawesome.com/bfd52c390d.js" crossorigin="anonymous"></script>


<!-- Body -->
<div class="front-page">
  <div class="intro">
    <header>
      <h1>Guinevere <br> E. <br> Mayberry</h1>
      <h4>Front-End Web Development &mdash; Largo, Florida</h4>
    </header>

    <!-- Load external JavaScript -->
    <script src="scripts.js"></script>

    <div class="social-bar">
      <a href="#" class="facebook"><i class="fab fa-facebook"></i></a>
      <a href="#" class="linkedin"><i class="fab fa-linkedin"></i></a>
      <a href="#" class="pillowfort"><i class="fas fa-blog"></i></a>
    </div>
    <i class="fas fa-arrow-alt-circle-down"></i>
  </div>
</div>

<div class="scrolling">
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
</div>
0
Rana 17 September 2021, 21:22

Saya memotong kode Anda dan menghapus semua baris CSS yang tidak perlu. Saya hanya menambahkan body { margin: 0; } untuk mengatur ulang margin tubuh default. Lalu saya baru saja menambahkan front-page { height: 100vh; } untuk membiarkannya menutupi seluruh ketinggian viewports.

body {
  display: flex;
  flex-direction: column;
  margin: 0;
}

header {
  font-family: "Architects Daughter", cursive;
  text-align: center;
}

.arrow {
  font-size: 2em;
  visibility: hidden;
}

.front-page {
  background-color: lightseagreen;
  height: 100vh;
}

.social-bar a {
  padding: 0 5px;
}

@media only screen and (min-width: 701px) {
  .arrow {
    visibility: visible;
  }
}
<!-- Head -->
<script src="https://kit.fontawesome.com/bfd52c390d.js" crossorigin="anonymous"></script>


<!-- Body -->
<div class="front-page">
  <div class="intro">
    <header>
      <h1>Guinevere <br> E. <br> Mayberry</h1>
      <h4>Front-End Web Development &mdash; Largo, Florida</h4>
    </header>

    <!-- Load external JavaScript -->
    <script src="scripts.js"></script>

    <div class="social-bar">
      <a href="#" class="facebook"><i class="fab fa-facebook"></i></a>
      <a href="#" class="linkedin"><i class="fab fa-linkedin"></i></a>
      <a href="#" class="pillowfort"><i class="fas fa-blog"></i></a>
    </div>
    <i class="fas fa-arrow-alt-circle-down"></i>
  </div>
</div>

<div class="scrolling">
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
</div>
0
tacoshy 17 September 2021, 21:34

Menggunakan properti position: untuk membuat tata letak halaman umumnya dianggap praktik yang buruk.

Jika Anda ingin menghilangkan margin default, gunakan body { margin: 0} dan hilangkan position properti dari .front-page. Kemudian elemen akan diposisikan di bawah satu sama lain.

0
Kristian Nilsson 17 September 2021, 21:45