Bootstrap 4, как получить отзывчивый рост на SPA с «без прокрутки»?

Question

Я очень новичок в области адаптивного дизайна веб-сайтов (в общем, для разработки интерфейса), и я пытаюсь создать простое небольшое угловое приложение для чата, используя начальную загрузку, проектируя с внимательностью в течение всего пути. Тем не менее, я сталкиваюсь с множеством проблем, когда начинаю встраивать flex-боксы, и думаю, что просто не до конца понимаю. В идеале это мои взгляды, когда вы используете устройство большего размера и меньше.

Large

Маленькое устройство (обратите внимание, я ничего не сделал для изменения настроек кнопки):

И вот реальность, которую я получаю при использовании h-100 (я не вижу встроенных адаптивных классов для высоты, но могу ошибаться):

Я думаю Я понимаю проблему, я использую h-100 с col-12, и поэтому левая сторона занимает всю комнату, а правая сторона шунтируется со страницы. Я попытался получить такой же внешний вид с помощью flex-fill и flex-grow-1, но они, похоже, ничего не делают с настоящим документом. Вот мой код:

<app-header></app-header>
<div class="container-fluid" id="mainContent">
    <div class="row h-100 flex-column-reverse flex-md-row">
      <div class="col-md-3 col-12 flex-fill">
        <div class="d-flex flex-column h-100 justify-content-between">
          <div>
              <app-channels></app-channels>
          </div>
          <div>
              <app-settings></app-settings>
          </div>
        </div>
      </div>
      <div class="col-md-9 col-12">
        <app-messages></app-messages>
      </div>
    </div>
</div>

(app-messages также использует h-100 для заполнения экрана)

пользовательские scss:

@import "../node_modules/bootstrap/scss/bootstrap";

html, body {
    height: 100% !important;
    width: 100% !important;
}

Есть ли способ заставить этот контент переключаться между представлениями, которые я опубликовал выше, с помощью flexbox вместо использования h-100? Или есть такие отзывчивые классы, как, например, h-sm-100, так что он использует только 100% высоты для маленьких и выше?

Спасибо за ваше время.

Answer 1

для высоты, вам, возможно, придется взять материю в свои руки ... что не так сложно, как вы можете видеть в этой угловой демонстрации

Этот следующий код помогает получить то, чтовам требуется ..

CSS часть:

.outsideDiv{ overflow-y:hidden;}
.app-header { height:10vh; background:#000; color:#fff;}
.myHeight{  background: lightgray; }
.mySection{padding:0; }

.app-messages {  background: #c7b6c7;}
.createMessage{background: lightyellow; margin: 1%; position: absolute; bottom: 0px; width: 98%; }
.app-settings {  background:blue; }
.app-channels {  background:#b3fbfb;}

@media SCREEN AND (min-width: 768px){
  .myHeight{ height:90vh;  }
  .app-channels { height: 80%; }
  .app-messages { height: 100%; }
  .app-settings { height: 20%;  }
}
@media SCREEN AND (max-width: 767px){
  .myHeight{ height:auto;  }
  .myHeightSection1 { height:20vh;}
  .myHeightSection2 { height:70vh;}
  .app-channels { height: 100% }
  .app-messages { height: 100%; }
  .app-settings { height: 5%;  width:20%; position:fixed; right:0; bottom:0; }
}

HTML часть:

<div class='outsideDiv'>

    <div class="app-header">
        <app-header>
        </app-header>
    </div>
    <div class="container-fluid" id="mainContent">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-12 col-12 d-flex flex-column mySection">
                <div class="d-flex flex-column h-100 justify-content-between order-last">
                    <div class='myHeight myHeightSection1'>
                        <div class="app-channels">
                            <app-channels></app-channels>
                        </div>
                        <div class="app-settings">
                            <app-settings></app-settings>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-9 col-md-9 col-sm-12 col-12 order-first order-lg-2 order-md-2 mySection">
                <div class='myHeight myHeightSection2'>
                    <div class="app-messages">
                        <app-messages></app-messages>
                        <div class='createMessage'>Create Message</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>