У меня body
занимает 100vh
. Вверху страницы есть nav
который занимает высоту, которая ему нужна. Как можно задать высоту блоку mainContainer
, чтобы он занимал высоту до конца body
(неважно, есть ли в нем достаточного содержимого, нет ли, или он переполнен как на скриншоте) и не выходил за его пределы? Если задавать, к примеру, max-height: 100%
то он все равно выходит за пределы из-за наличия nav
. На скриншоте представлена страница во всю высоту body
. Используемые классы взяты из Bootstrap 4.
<body class="bg-darkness vh-100 d-flex flex-column pb-lg-4">
<nav class="navbar navbar-dark bg-dark">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
</nav>
<div id="mainContainer" class="container-fluid container-lg pt-lg-2 flex-grow-1">
<div class="row h-100">
<div id="openedDialogContainer" class="col-12 col-sm-12 col-md-12 col-lg-8 h-100 bg-dark text-white p-0 d-flex flex-column justify-content-between">
<div class="dialogInfo text-center pt-2 pb-1 border-bottom">
<div class="dialogInfoTitle">Mustafa</div>
<div class="dialogInfoStatus status">online</div>
</div>
<div class="pt-2 pb-2 container-lg h-100 y-scroll">
<div class="messageContainer">
<div class="message bg-white text-dark px-2 py-1 rounded d-inline-block">
<div class="messageText">Hello!</div>
<div class="messageStatus"></div>
</div>
</div>
<div class="messageContainer mt-2 overflow-hidden">
<div class="message bg-white text-dark px-2 py-1 w-75 rounded d-inline-block float-right">
<div class="messageText text-break">Hello!HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello</div>
<div class="messageStatus float-right">
<svg class="bi bi-check-all" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="" clip-rule="evenodd"/>
<path d=""/>
</svg>
</div>
</div>
</div>
</div>
<div class="container-lg">
<div class="row p-2">
<input type="text" class="form-control col col-sm col-md col-lg">
<button class="btn col-auto col-sm-auto col-md-auto col-lg-auto">
<svg class="bi bi-triangle rotate invert" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</body>
y-scroll
что задаетoverflow-y:scroll
. он работает если уменьшать высотуmainContainer