0

У меня 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>

5
  • А если в mainContainer будет больше контента чем на высоту одного экрана, тогда что должно происходить?
    – vantal
    13 апр 2020 в 12:12
  • @vantal контент увеличивается только за счет сообщений, поэтому в контейнере для сообщений задан класс y-scroll что задает overflow-y:scroll. он работает если уменьшать высоту mainContainer
    – ZOOM SMASH
    13 апр 2020 в 12:15
  • А для nav можно задать фиксированную высоту?
    – vantal
    13 апр 2020 в 12:17
  • @vantal возможно, это как-то отразится на адаптивности?
    – ZOOM SMASH
    13 апр 2020 в 12:18
  • Написал в ответе пример, сли я все правильно понял. Для адаптива можете с помощью медиазапроса сделать другую высоту nav
    – vantal
    13 апр 2020 в 12:23

1 ответ 1

2

Нужно задать высоту для nav, для контейнера задаете высоту 100vh минус высота nav

body{
  height: 100vh;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
nav{
  background: #ccc;
  height: 50px;
}
.container-fluid{
 height: calc(100vh - 50px);
}
<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!HelloHelloHelloHelloHelloHelloHelloHelloHello</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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.