Bootstrap 4, how to get responsive height on SPA with "no scroll"? - html

Question

I am very new to responsive website design (well front end development in general) and I am trying to create a basic little angular chat application, using bootstrap, designing with responsiveness in mind the whole way. I am however running into a lot of issues when I start nesting flex boxes, and I think I just don't fully understand it. Ideally these are my views when on a larger device and smaller.
Large:
Small device (note I have not done anything to make the settings change to a button):
And here is the reality that I get when using h-100 (I don't see any built in responsive classes for height, but I could be totally wrong):
I think I understand the issue, I am using h-100 with col-12 and so the left side takes up all the room, and the right side is shunted off the page. I have tried getting this same look with flex-fill and flex-grow-1, but they seem to do nothing to the actual document. Here is my code:
<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 also uses h-100 to fill the screen)
custom scss:
#import "../node_modules/bootstrap/scss/bootstrap";
html, body {
height: 100% !important;
width: 100% !important;
}
Is there a way I can get this content to switch between the views that I have posted above with purely flexbox instead of using h-100? Or are there responsive classes like, for example, h-sm-100 so that it only uses 100% height on small and above?
Thanks for your time.

Answer 1

for height, you may have to take matter in your own hands... which is not that complex as you can see in this Angular demo
This following code helps produce what you require..
CSS part:
.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 part:
<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>