Please review my html and css Carefully.
Hope it will help you. 🙂
Let me know if you have any question.
#dashboardContainer {
display: flex;
align-items: stretch;
}
#dashboardNav {
height: 84px;
width: 100%;
background: #4154da;
}
#rightBar {
width: 376px;
}
#content {
width: 100%;
min-height: 100vh;
transition: all 0.3s;
}
#sidebar {
min-width: 175px;
max-width: 175px;
background: #de3232;
}
nav#rightBar {
width: 20%;
flex-basis: 20%;
background: #dec514;
max-width: 175px;
}
.body-content {
height: calc(100vh - 84px);
width: 100%;
flex-basis: 80%;
}
.dashboard {
display: flex;
justify-content: space-between;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<body class="dashboardBody">
<div id="dashboardContainer">
<nav id="sidebar">
<!-- Left expandable sidebar -->
<h2>sidebar</h2>
</nav>
<div class="d-flex flex-column" id="content">
<nav class="navbar navbar-expand-lg navbar-light p-0 justify-content-end" id="dashboardNav">
<h2>Top navbar</h2>
</nav>
<div class="dashboard">
<div class="body-content">
<!-- Content -->
<h2>Body content</h2>
</div>
<nav id="rightBar">
<!-- Right sidebar -->
<h2>Right sidebar</h2>
</nav>
</div>
</div>
</div>
Here is the code. Hope it will help you. If any changes please let me know.
.dashboardContainer {
display: flex;
align-items: stretch;
height: 100vh;
}
.dashboard-content {
width: 100%;
}
#dashboardNav {
height: 84px;
width: 100%;
background: purple;
display: flex;
justify-content: center;
}
.dashboard-wrap-content {
display: flex;
height: calc(100% - 84px)
}
.dashboard-left {
width: 80%;
}
.rightBar {
width: 20%;
background: yellow;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.navbar h4{
text-align: center;
}
#content {
width: 100%;
min-height: 100vh;
transition: all 0.3s;
}
#sidebar {
min-width: 100px;
max-width: 100px;
background: red;
display: flex;
align-items: center;
justify-content: center;
}
.dashboard-left {
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
h4 {
font-weight: bold;
background: #fff;
margin-bottom:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<body class="dashboardBody">
<div class="dashboardContainer">
<nav id="sidebar">
<!-- Left expandable sidebar -->
<h4>NAV1</h4>
</nav>
<div class="dashboard-content">
<nav class="navbar navbar-expand-lg navbar-light p-0" id="dashboardNav">
<h4>NAV2</h4>
</nav>
<div class="dashboard-wrap-content">
<div class="dashboard-left">
<!-- Content -->
Content
</div>
<nav class="rightBar">
<!-- Right sidebar -->
<h4>NAV3</h4>
</nav>
</div>
</div>
</div>
I need your help wtih seting up layouts. I’m new with FE dev. I’ve to make layout like on attached picture:
desired layout
*NAV on picture are NAVBARs Bootstrap components
How to make it right to have navbars and content div stretched to full page height? When I use attribute min-height: 100vh to nav3 I got scrolling bars. I suspect that this attribute gets height of full window and I have to subtract height of nav2. I hope there is a simple soluton for this.
#dashboardContainer {
display: flex;
align-items: stretch;
}
#dashboardNav {
height: 84px;
width: 100%;
}
#rightBar {
width: 376px;
}
#content {
width: 100%;
min-height: 100vh;
transition: all 0.3s;
}
#sidebar {
min-width: 175px;
max-width: 175px;
}
<body class="dashboardBody">
<div id="dashboardContainer">
<nav id="sidebar">
<!-- Left expandable sidebar -->
</nav>
<div class="d-flex flex-column" id="content">
<nav class="navbar navbar-expand-lg navbar-light p-0 justify-content-end" id="dashboardNav">
<!-- Top navbar -->
</nav>
<div>
<div>
<!-- Content -->
</div>
<nav id="rightBar">
<!-- Right sidebar -->
</nav>
</div>
</div>
</div>
I have added code. Please check it. If any changes please let me know.
Don’t use position: absolute. Its just simple bootstrap 4. Please Modify your code.
#Attention please: This example is not according to question, this is not fit to screen and body scrollbar is appear.
Which code is working well and not this is decide by question owner, This is not your job, And also you need to read this article->
