@kosmok

Почему при уменьшении экрана div увеличивается в высоту(width)?

У меня есть проблема,когда экран уменьшается div увеличивается в высоту.Ширина и высота указана в vw vh вот код:
<body>
<header>
<div class="hed">
    <div class="Home hedB"><p>about us</p></div>
    <div class="portfolio hedB"><p>about us</p></div>
    <div class="about_us hedB"><p>about us</p></div>
    <div class="contact hedB"><p>contact</p></div>
</div>
</header>
</body>

А вот css:
body
{
    margin: 0;
}
header
{
    background-color: 313030;
    width: 70vw;
    height: 10vh;
    margin:0 auto;
    margin-top: 3vh;
    max-height: 10vh;
}
.hed
{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    width: 35vw;
    height: 10vh;
    margin:0 auto;
}

.hedB
{
    background-color: 313030;
    height: 10vh;
}

.hedB:hover
{
    background-color: red;
}

.Home p,.portfolio p,.about_us p,.contact p
{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: white;
    font-size: 1.3vw;
    text-align:center;
}

Почему при уменьшении окна увеличивается высота блока? Не помогло.
  • Вопрос задан
  • 81 просмотр
Пригласить эксперта
Ответы на вопрос 1
l3ftoverz
@l3ftoverz Куратор тега CSS
Rings of Saturn - The Husk
когда экран уменьшается div увеличивается в высоту

Ширина и высота указана в vw vh


Ты правда не понимаешь, почему?) По-сути ты указываешь пропорциональное соотношение размеру вьюпорта.
Открой консоль и поресайзи вьюпорт в примере на кодепене. Меняется размер вьюпорта - меняется значение wv. wh, а значит и размер header. Используй другие единицы измерения.

Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
16 сент. 2019, в 16:51
10000 руб./за проект
16 сент. 2019, в 16:47
25000 руб./за проект
16 сент. 2019, в 16:31
5000 руб./за проект