Блог

Главная - Вопросы по программированию - CSS: процент и vh / vw вместе, странный результат

CSS: процент и vh / vw вместе, странный результат

#html #css

#HTML #css

Вопрос:

У меня есть простой набор divs. Я использовал vw / vh и проценты, но я наткнулся на странную проблему, которую не могу понять. Вы можете увидеть проблему ниже:

[https://codepen.io/anon/pen/qvQBgp#anon-login ][1]

 .big{
width: 20vw;
height: 20vh;
margin-left: auto;
margin-right: auto;
border: 1px dotted black;
margin-top: 10vh;
}

.toprow {
background-color: cyan;
display: flex;
flex-direction: row;
justify-content: space-between;
height: 20%;
}

.bottomrow {
display: flex;
flex-direction: row;
margin-top: 60%;
margin-bottom: 0px;
justify-content: space-between;
background-color: cyan;
height: 20%;
}


.left_top {
width: 20%;
height: 100%;
background-color: red;
}

.right_top {
width: 20%;
height: 100%;
background-color: green;
}

.left_bottom {
width: 20%;
height: 100%;
background-color: orange;
}

.right_bottom {
width: 20%;
height: 100%;
background-color: blue;
}  
 <!DOCTYPE html>
<html lang="zxx">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="tyyli2.css">
</head>
<body>
<div class="big">
<div class="toprow">
<div class="left_top">
</div>
<div class="right_top">
</div>
</div>
<div class="bottomrow">
<div class="right_bottom">
</div>
<div class="left_bottom">
</div>
</div>
</div>
</body>
</html>

Я использовал vh / vw для «большого div». Затем я рассудил, что правильным способом определения меньших divs будут проценты, потому что они являются дочерними элементами внутри большого div. Это приводит к тому, что нижняя строка не оказывается внутри большого div, если / когда изменяется размер области просмотра. Структура html верна. Для сравнения, если я определяю все единицы измерения в vh / vw, это работает. Насколько мне известно, это не так, как должно быть, потому что меньшие divs находятся внутри большого div и, следовательно, должны определяться как процент от большого div, верно? Почему проценты «терпят неудачу» в этом параметре?

Не могли бы вы, пожалуйста, пролить некоторый свет на этот вопрос 🙂 Спасибо! Кстати, это может выглядеть как домашняя работа (поскольку это так нелепо), но это не так. Я изучаю css / html просто для развлечения, и это была задача, которую я придумал в своем слабом уме: D

Ответ №1:

Вы, вероятно, думаете, что добавляете здесь 20% плюс 60% плюс 20% и в результате должны получить 100% — но эти 60% не рассчитываются на основе того же базового значения, что и те 20%, с которых начинали.

Процентное значение для margin всегда относится к ширине содержащего блока — даже для margin-top и -bottom.

height:20% означает 20% высоты родительского элемента, но margin-top:60% означает 60% ширины содержащего блока.

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

1. Спасибо, я этого не знал 🙂 Если / когда верхний предел не может быть использован, каким был бы способ «протолкнуть» нижний предел до самого низа большого div? Есть другой способ, кроме использования vw / vh вместо %?

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