View Setup for Site

Question

Given the following layouts for a responsive site:

Given a position fixed header (4rem), how can I setup my main container (C & D) to only allow a maximum height of 100% and scroll independently based on the overall height of the contents in C or D?

You can view a demo of what I have so far here:

https://stackblitz.com/edit/js-bootstrap4-6o7itq

user_2410655 · Answer

The basic idea is to

Set the height of the most outer element
Set the inner elements' height to 100%
Set auto overflow to elements you want to scroll independently based on the content

The layout would look like:

To set the height of the most outer element, I have styles like:

$header-height: 4rem;

header {
    height: $header-height;
}

main {
    height: calc(100vh - #{$header-height});
}

See the header is set to 4rem and main is set to 100% view height minus 4rem.

Then I am using Bootstrap's built-in class .h-100 in several places to make sure the inner elements there take up 100% height.

Finally you just need to set auto overflow on C and D. I am using Bootstrap built-in class .overflow-auto for that as well.

demo: https://jsfiddle.net/davidliang2008/3kjoh5sc/34/

user_12330854 · Answer

What if you add this

.main-view {
  height: 100vh;
  overflow: hidden;
}

.sidebar-wrapper, .main-content-wrapper {
  height: 100vh;
  overflow-y: scroll;
}

user_14722599 · Answer

Is this helpful?

// Import stylesheets
import "./style.css";

// Write Javascript code!

.header {
  width: 100%;
}

.container-fluid {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.h-4r {
  height: 4rem;
}

.h-100 {
  height: 100%;
}

.menu-header {
  position: fixed;
  top: 0;
  left: 15;
  width: 100%;
  z-index: 2;
}

.menu-header-name {
  background-color: rgba(0, 0, 0, 0.25);
  width: 100%;
  text-align: center;
}

.menu-header-title {
  background-color: rgba(0, 0, 0, 0.25);
  width: 100%;
  text-align: center;
}

.main-view {
  display: flex;
  flex-grow: 1;
  padding-top: 4rem;
  overflow: hidden;
  max-height: 100%;
  height: 100vh;
  overflow-y: scroll;
}

.sidebar-wrapper {
  /* overflow-y: scroll; */
}

.sidebar {
  margin-top: 1rem;
  height: 110vh;
  background-color: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-content-wrapper {
  /* overflow-y: scroll; */
}

.main-content {
  margin-top: 1rem;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

user_5617402 · Answer

just copy and paste(replace) both of the codes into your stackblitz.com that you posted ( where i also did my tests ) and let me know if this is what you want

your css

html, body {
  height:100%;
}
.header {
  width: 100%;
}
.container-fluid {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}
.h-4r {
  height: 4rem;
}
.h-100 {
  height: 100%;
}
.menu-header {
  flex: 0 1 auto;
}
.menu-header-name {
  background-color: rgba(0, 0, 0, 0.25);
  width: 100%;
  text-align: center;
}
.menu-header-title {
  background-color: rgba(0, 0, 0, 0.25);
  width: 100%;
  text-align: center;
}
.main-view {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
}
.sidebar {
  height: 110%;
  background-color: rgba(0, 0, 0, 0.25);
}
.main-content {
  background-color: rgba(0, 0, 0, 0.25);
  height: 110%;
}
.sidebar-wrapper,
.main-content-wrapper {
  flex: 1 1 auto;
  overflow-y: scroll;
  padding-top:15px;
  padding-bottom:15px;
}

and your html

View Setup for Site

4 Answers