Bootstrap 4 Navbar and content fill height flexbox
Instead of using h-100 on the yellow content area, add an extra CSS class to make it flex-grow:1 in height...
.flex-fill {
flex:1 1 auto;
}
https://www.codeply.com/go/xBAMfbHqbN
<div class="container-fluid h-100 d-flex flex-column">
<nav class="navbar navbar-expand-sm s-navbar">
<a class="brand navbar-brand" href="/">Brand</a>
<button class="navbar-toggler s-btn-hamburger order-first s-color-icons" aria-expanded="true" aria-controls="navbar-test" aria-label="Toggle navigation" type="button" data-target="#navbar-test" data-toggle="collapse">
<span class="navbar-toggler-icon k-icon k-icon-md k-i-hamburger"></span>
</button>
<div class="navbar-collapse s-menu-content collapse show" id="navbar-test">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown1" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown">Menu Item</a>
<div class="dropdown-menu" aria-labelledby="dropdown1">
<a class="dropdown-item" href="/Device">Sub menu</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/Test">Test</a>
</li>
</ul>
</div>
</nav>
<div class="row flex-fill">
<main class="col" style="background-color: yellow"></main>
</div>
</div>
Note: The flex-fill utility class will be included in the next Bootstrap 4.1 release:
https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9
(Updated Bootstrap 4.1 demo)
Related question: Bootstrap 4: How to make the row stretch remaining height?
How to use Bootstrap 4 flexbox to fill available content?
Update Bootstrap 4.1.0
The flex-grow-1 and flex-fill classes are included in Bootstrap 4.1.0
Update Bootstrap 4.0.0
Add a flex-grow class like this:
.flex-grow {
flex: 1 0 auto;
}
Then, the utility classes can be used for the rest of the layout:
<div class="d-flex flex-column h-100">
<nav class="navbar navbar-toggleable-md sticky-top bg-faded">
<a class="navbar-brand" href="#">
<h1 class="navbar-brand mb-0">My App</h1>
</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link">Item 1</a></li>
</ul>
</nav>
<div id="outer" class="d-flex flex-column flex-grow">
<div id="one" class="">
header content
<br> another line
<br> And another
</div>
<div id="two" class="bg-info h-100 flex-grow">
main content that I want to expand to cover remaining available height
</div>
<div id="three" class="">
footer content 40px height
</div>
</div>
</div>
https://www.codeply.com/go/3ZDkRAghGU
Here's another example with on Bootstrap 4.3.1 that has a navbar, sidebar and footer with scrolling content area:
https://www.codeply.com/go/LIaOWljJm8
Bootstrap 4 make nested row fill parent that has been made to fill viewport height using flex-grow
I think you just need to remember that flex-grow applies to the child of display:flex, and not the parent. Therefore, if the parent is also a child flex-grow will work.
.flex-fill {
flex: 1 1 auto;
}
In your case, <div class="container-fluid flex-fill"></div> should also be d-flex so that you can use flex-grow to have it's children grow in height, and then continue this down to the drawing area.
https://codeply.com/go/gT3jsg43Lv
<div class="d-md-flex flex-column h-100">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<button class="btn btn-outline-warning mr-auto" type="submit">Back</button>
<button class="btn btn-outline-success" type="submit">Logout</button>
</nav>
<div class="container-fluid d-flex h-100">
<div class="row flex-grow">
<div class="col-md-9">
<div class="row h-100">
<div class="col-md-12 d-flex flex-column flex-grow">
<div class="btn-toolbar justify-content-between" id="label-toolbar">
<div class="btn-group">
<select class="form-control form-control-sm" id="label-option">
<option>Main</option>
<option>Unknown</option>
</select>
<button type="button" class="btn btn-outline-primary btn-sm" id="create-button">Create</button>
<button type="button" class="btn btn-outline-primary btn-sm" id="delete-button">Delete</button>
<button type="button" class="btn btn-outline-primary btn-sm" id="edit-button">Edit</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-success btn-sm" id="previous-button">Previous</button>
<button type="button" class="btn btn-outline-success btn-sm" id="next-button">Next</button>
</div>
</div>
<div id="draw-area" class="flex-grow bg-warning"> draw area </div>
</div>
</div>
</div>
<div class="col-md-3 label-sidebar"></div>
</div>
</div>
</div>
Note: The flex-fill utility class will be included in the next Bootstrap 4.1 release: https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9
Here's another example with scrollable right column, and top navbar:
https://codeply.com/p/93751rK5WQ
Related
Bootstrap 4.0 - responsive header with image + navbar + full-height body
How to make the row stretch remaining height
Bootstrap 4 background image full-height with navbar no scrolling
You can use the Bootstrap 4 flexbox utils, and add flex:1 1 auto to the main-page so it fills the height (with no scrolling).
https://www.codeply.com/go/isN2cS0m0q
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <style>body { min-height: 100vh;}.flex-fill { flex: 1 1 auto;} .bg { background-image: url("http://placehold.it/350x150"); background-position: center; background-repeat: no-repeat; background-size: cover;}</style><body class="d-flex flex-column"><nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div></nav><div class="main-page d-flex flex-column flex-fill"> <div class="bg flex-fill"></div> <div class="data"> bla bla bla </div></div></body>Flexbox: stretch sidebar height to the parent
In Bootstrap 4.1 there is a flex-fill utility class for this purpose.
.flex-fill {
flex: 1 1 auto;
}
In your case, add it to your container-fluid and you won't need all the h-100s. Also, make the container fluid d-flex so that flex-fill can also be applied on the row.
<div class="main h-100 d-flex flex-column">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a href class="navbar-brand">Menu</a>
</nav>
<div class="container-fluid flex-fill d-flex">
<div class="row flex-fill">
<div class="col-xs-2 bg-light pr-3 menuContainer d-flex flex-column">
<button class="btn btn-outline-primary mt-3 btn-sm btn-block"> Test </button>
<nav class="nav navbar-light list">
<ul class="navbar-nav flex-column">
<li class="nav-item"><a href="#" class="nav-link">A1</a></li>
<li class="nav-item"><a href="#" class="nav-link">A1</a></li>
</ul>
</nav>
</div>
<div class="col-xs-10 p-0">
Content
</div>
</div>
</div>
</div>
https://www.codeply.com/go/GEiw0PABgi
Also, note that col-xs-* is col-* in Bootstrap 4 as the -xs infix has been removed. Here's a simplified example w/o the extra CSS.
Related questions:
Bootstrap 4 Navbar and content fill height flexbox
How do I make collapsed Bootstrap Navbar open to full screen height smoothly?
The sudden jump is because you are adding the height to the collapse class that isn't present until the last moment of the animation. Instead try to give the height to a custom class or one that you have already applied like nav-bar.
Full Height Side Nav Bar moves below main div on small screens w/ Flex or w3.css
After trying for a while to use flex I found, through this page (CSS tricks), that in this case it is easier to use grid. So this is, based on that example, one way to achieve it:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The "grid" alternative</title>
<style>
.header {
grid-area: header;
background-color: hotpink;
position: sticky;
top:0;
}
.footer {
grid-area: footer;
background-color: deepskyblue;
position: sticky;
bottom: 0;
height: 50px;
}
.sidebar {
grid-area: sidebar;
background-color: gold;
}
.main {
grid-area: main;
background-color:tomato;
}
.grid {
font-size: 30px;
text-align: center;
display: grid;
grid-template-columns: 20% 80%;
grid-template-areas: "sidebar header"
"sidebar main"
"sidebar footer";
}
@media (max-width: 800px) {
.grid{
grid-template-columns: 100%;
grid-template-areas: "header"
"main"
"sidebar"
"footer";
}
.sidebar { position:sticky;
bottom:50px;
}
</style>
</head>
<body>
<div class="grid">
<div class="header">Header</div>
<div class="main">Main
<p>Post emensos insuperabilis expeditionis eventus languentibus partium animis,
quas periculorum varietas fregerat et laborum, nondum tubarum cessante clangore
vel milite locato per stationes hibernas, fortunae saevientis procellae tempestates
alias rebus infudere communibus per multa illa et dira facinora Caesaris Galli, qui
ex squalore imo miseriarum in aetatis adultae primitiis ad principale culmen insperato
saltu provectus ultra terminos potestatis delatae procurrens asperitate nimia cuncta
foedabat. Propinquitate enim regiae stirpis gentilitateque etiam tum Constantini
nominis efferebatur in fastus, si plus valuisset, ausurus hostilia in auctorem suae
felicitatis, ut videbatur. 2 Cuius acerbitati uxor grave accesserat incentivum, germanitate
Augusti turgida supra modum, quam Hannibaliano regi fratris filio antehac Constantinus
iunxerat pater, Megaera quaedam mortalis, inflammatrix saevientis adsidua, humani cruoris
avida nihil mitius quam maritus; qui paulatim eruditiores facti processu temporis ad nocendum
per clandestinos versutosque rumigerulos conpertis leviter addere quaedam male suetos falsa et
placentia sibi discentes, adfectati regni vel artium nefandarum calumnias insontibus adfligebant.
Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda
Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum,
flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta,
oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis f
ormula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui
permissus occideretur
</p></div>
<div class="sidebar"> Sidebar</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
I hope this help you.
Saludos.
Related Topics
Css3 - 3D Flip Animation - Ie10 Transform-Origin: Preserve-3D Workaround
Difference Between Body and * in CSS
Vertically Centering Content of :Before/:After Pseudo-Elements
Sass @Each with Multiple Variables
Bug in CSS3 Rotatey Transition on Safari
How to Extend a Class/Mixin Which Has Dynamically Formed Selector
How to Avoid Media Query Overlap
Ie Not Rendering CSS Properly When the Site Is Located at Networkdrive
Twitter's Bootstrap 3 Grid, Changing Breakpoint and Removing Padding
Binding in Control with "Class" Attribute
Why Put in Front of the File Name "_" or "_" in SCSS/Css
How to Remove Blue "Selected" Outline on Buttons