Я выбираю минималистичный дизайн, который открывается полной страницей введения. Это введение находится в div .front-page, который покрывает 100% доступного экрана.

Затем есть еще один div, который должен находиться под .front-page при прокрутке вниз, но по какой-то причине он находится в position 0 в верхней части экрана, полностью скрытый за .front-page div. .

Я знаю, что если бы я хотел, я мог бы просто расположить его вручную, но это плохая практика кодирования. Должно быть простое решение, на которое я не обращаю внимания.

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 Сен 2021 в 00:03

3 ответа

Лучший ответ

Простым подходом будет использование position: relative вместо absolute, чтобы соблюдалась другая область охвата div, и если вы хотите использовать полноэкранный режим .front-page, используйте width: 100vw; height: 100vh; иначе, используя height: 100% будет касаться только области содержимого

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 Сен 2021 в 21:22

Я сократил ваш код и удалил все ненужные строки CSS. Я просто добавил body { margin: 0; }, чтобы сбросить поле тела по умолчанию. Затем я просто добавил front-page { height: 100vh; }, чтобы он покрыл всю высоту окна просмотра.

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 Сен 2021 в 21:34

Использование свойства position: для создания макета страницы обычно считается плохой практикой.

Если вы хотите отказаться от поля по умолчанию, используйте body { margin: 0} и опустите position свойство от .front-page. Затем элементы будут расположены друг под другом.

0
Kristian Nilsson 17 Сен 2021 в 21:45