Как задать flex-блоку высоту во весь вьюпорт?
Как задать flex-блоку в левой колонке (.leftCol) высоту во весь вьюпорт? height: 100vh; указан, но блок почему-то больше (выше) видимой части. Хотя, по идее, должен быть по её высоте. max-height: 100vh; - не помогает.
html, body { position: relative; border: 0; margin: 0; background: grey; }
* { box-sizing: border-box; }
#wrappHead {
display: flex;
flex-direction: column;
position: -webkit-sticky; /* Для "Safari" */
position: sticky;
top: 0;
}
#wrappHead > div {
border: 1px solid;
}
#topHeadAccount {
display: flex;
flex-direction: column;
}
#topHeadAccount > div {
border: 1px solid lightgreen;
background: rgb(241, 101, 41);
}
#topHeadToo {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
#topHeadToo > div {
border: 1px solid yellow;
}
#listHead {
width: 20%;
background: LightGray;
}
#trHead {
width: 80%;
background: LightGray;
}
#content-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background: rgb(0, 150, 208);
}
#content-container > div {
height: 100vh; border: 1px solid red; background: blue;
}
.leftCol {
height: 100vh; /* Test11 */
display: flex; /* Test11 */
justify-content: center; /* Test11 */
align-items: center; /* Test11 */
/* Test11... спан по центру. */
width: 20%;
}
.headFo {
height: 20px;
position: -webkit-sticky; /* Для "Safari" */
position: sticky;
bottom: 0;
background: lightgreen;
}
.trCol { width: 80%; }
<div id='wrappHead'>
<div id='topHeadAccount'>
<div> acc</div>
<div> tooPanel</div>
</div>
<div id='topHeadToo'>
<div id='listHead'> list1</div>
<div id='trHead'> list2</div>
</div>
</div>
<div id='content-container'>
<div class="leftCol">
<div class="headFo"></div>
<!-- Test11 -->
3
<p>
<br> <span class="no-PL-User">Тест строка...</span> <!-- Test11 -->
<br> <span class="no-PL-User">Тест строка 2...</span> <!-- Test11 -->
</p>
</div>
<div class="trCol">
строка <br>новая строка <br>новая строка 2 <br>новая строка 3 <br>новая строка 4 <br>новая строка 5 <br>новая строка 6 <br>новая строка 7 <br>новая строка 8 <br>новая строка 9 <br><br>новая строка 10 <br><br>новая строка 11 <br><br>новая строка 12 <br><br>новая строка 13 <br><br>новая строка 14 <br><br>новая строка 15<br><br>новая строка 16
</div>
</div>
Вот код: https://codepen.io/valera10/pen/YzgvwNr