Как получить контейнер div, чтобы изменить его высоту, чтобы нижняя часть контейнера всегда разделяла блок текста (пример ниже) - PullRequest
Новая
       0

Как получить контейнер div, чтобы изменить его высоту, чтобы нижняя часть контейнера всегда разделяла блок текста (пример ниже)

0 голосов
/ 06 января 2020

Мне было интересно, как я могу получить blue-i sh div, чтобы изменить размер так, чтобы нижняя часть всегда разделяла «HEADER» пополам.

Прямо сейчас, у меня есть текст как фиксированная позиция и его положение регулируется в нижней части области просмотра. Синий div зафиксирован наверху, и его высота регулируется в соответствии с окном просмотра. Я включил фрагмент кода моего CSS. 

/* text styles */

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 10vw;
    color: #C7DCEA;
    letter-spacing: 1.44px;
    line-height: 6vw;
}

p {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1vw;
    color: #C7DCEA;
    line-height: 1.5vw;
}

/* div styles */

body{
    background-color: #070707;
}

div.header {
    position: fixed;
    bottom: 6vw;
    left:1.8vw;
    z-index: 2;
}

div.paragraph{
    position: fixed;
    bottom: 5vw;
    left:3vw;
    z-index:3;
}

div.box{
    position: fixed;
    top:0px;
    left: 0px;
    right: 0px;
    background-color:#2248C4; /* purple */
    width:100vw;
    height:38vw;
    z-index: 1;
}


    <!-- HTML --!>
    <div class="box">
    </div>

    <div class="header">
        <h1>QWOTE</h1>
    </div>

   <div class="paragraph">
        <p>Every day on this site (or at least, hopefully every day) I plan on sharing some cool things other people say. <br> I'll say some things about what they say, and maybe you'll find it helpful (or not, up to you).
        </p>    
   </div>
...