Динамически настраивайте высоту элементов, чтобы они всегда придерживались одной страницы - PullRequest
Новая
       21

Динамически настраивайте высоту элементов, чтобы они всегда придерживались одной страницы

0 голосов
/ 11 февраля 2019

У меня есть несколько элементов на моей странице

enter image description here

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

В настоящее время я использую медиазапросы для регулировки высоты своих элементов.

@media screen and (min-width: 1920px) and (max-width: 5000px) {
  .A{
    height: 600x;
  }
  .B{
    margin-right: 400px;
  }
}

@media screen and (min-width: 1279px) and (max-width: 1919px) {
  .A{
    height: 550px;
  }
  .B{
    height: 350px;
}

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

Есть ли какое-нибудь умное решение для этого?

Ответы [ 2 ]

0 голосов
/ 12 февраля 2019 
  <!-- language: lang-css -->
    try this one

    * {
       margin:0;
       padding:0;
       box-sizing:border-box;
     }

     .container {
          height: 100vh; // this can gives (.container) height according to view screen
      }

     .a{
         height: calc(60vh - 40px);//minus the header height
       }

      .b{
         height: calc(40vh - 60px); //minus the footer height
        }



<!-- language: lang-html -->

    <div class="container">
      <header>header</header>
      <div class="a">A</div>
      <div class="b">B</div>
      <footer>footer</footer>
    </div>
0 голосов
/ 11 февраля 2019

Мы можем использовать Flexbox для решения этой задачи в столбчатом направлении.

  • Поскольку вы использовали 600px / 400px в своем исходном коде, я использовал 6 и 4 как flex-grow значения для .a. и .b. соответственно.
  • Эти flex-grow значения являются относительными, поэтому .6, .4 или 600 400 дадут тот же результат.
  • header и footer занимаюткакая комната остается в контейнере после .a и b занимают их место. 

html, body {
  margin: 0;
}

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container > * {
  padding: .5em;
}

.a {
  flex-grow: 6;
  background-color: #eee;
}

.b {
  flex-grow: 4;
  background-color: #ff0;
}
<div class="container">
  <header>header</header>
  <div class="a">A</div>
  <div class="b">B</div>
  <footer>footer</footer>
</div>

https://jsfiddle.net/j3kxr50L/2/

...