У меня есть проблема,когда экран уменьшается 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;
}
Почему при уменьшении окна увеличивается высота блока? Не помогло.
Простой
