Блог

Главная - Вопросы по программированию - Минимальное расстояние от верхней части страницы

Минимальное расстояние от верхней части страницы

#html #css

#HTML #css — код

Вопрос:

У меня есть 2 раздела высотой 100% и шириной 100%, хотя первый раздел имеет фоновое изображение. При изменении размера окна браузера, когда оно достигает определенной высоты, элемент div из второго раздела начинает перекрываться с первым разделом. Можно ли установить минимальное расстояние от div до верхней части страницы?

введите описание изображения здесь

введите описание изображения здесь

CSS — код

 section {
  width: 100%;
  height: 100vh;
}

.main section.page1 {
  background: rgb(97,66,52);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/2880px-Image_created_with_a_mobile_phone.png");
  background-repeat: no-repeat;
  background-position: center;
}

.main section.page2 {
  background: #F5F5F5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.form-parent {
  border: 1px solid #9D9D9D;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  height: 400px;
  width: 500px;
  padding: 10px;
} 
 <div class="main">
  <div id="home">
    <section class="page1">
    </section>
  </div>
  <section class="page2">
    <div id="order">
      <div class='form-parent'>
      </div>
    </div>
  </section>
</div>

извините за беспорядочный код.

Ответ №1:

Я просмотрел код и обнаружил, что если вы установите раздел css равным

 section {
 width: 100%;
 min-height: 100vh;
 }

Div-родительский элемент формы не перекрывается

Комментарии:

1. спасибо, я думаю, это тоже работает. Я уже нашел решение для этого. Я изменил свой раздел на абсолютную позицию, а затем создал пустой разделитель div, который заполнил всю страницу установил минимальную высоту как для разделителя, так и для раздела.

Ответ №2:

Используйте запросы @media. Вы можете проверить, является ли это проблемой высоты или ширины окна или и того, и другого, и использовать запрос @media для изменения объема пространства в разных точках.