Davide De Santis Davide De Santis - 7 months ago 15
HTML Question

HTML 100% Height with multiple inline scrolling divs

I am trying to achieve this layout:
enter image description here


  • Page is 1200px wide and centered

  • Page fills 100% of the browser's height

  • Page does not scroll

  • The green and red divs should have inline scrolling instead

  • Whenever the header (olive, blue, yellow, orange) gets higher, green and red should still fill the page but not more



I have been trying for some time now, but I don't know how to make the green (and red) part take the rest of the page's size. I don't want to use absolute positioning since I need the page to react to the header's dynamic size.
Also, I don't really want to use Javascript if possible.

Here's what I've got so far: https://jsfiddle.net/n3uefLmp/

CSS:

html, body {
margin: 0px;
height: 100%;
}
#page {
position: relative;
margin: 0 auto;
width: 1200px;
min-height: 100%;
max-height: 100%;
height: auto !important;
}

#bar1 {
min-height: 40px;
background-color: olive;
}

#bar2 {
width: calc(100% - 175px);
height: 40px;
background-color: blue;
}

#bar3 {
width: calc(100% - 175px);
height: 135px;
overflow: hidden;
background-color: yellow;
}

#rightBox {
position: absolute;
right: 0px;
width: 175px;
height: 175px;
background-color: orangered;
float: right;
}

#left {
background-color: green;
min-height: 100%;
max-height: 100%;
width: 50%;
}


HTML:

<body>
<div id="page">
<header>
<div id="bar1"></div>
<div id="rightBox"></div>
<div id="bar2"></div>
<div id="bar3"></div>
<div style="clear: both;"></div>
</header>

<div id="left">
bla
</div>
</div>
</body>


Any ideas on how I could achieve that layout using pure html/css?

Thanks!

Answer

Using flexbox model make your design more easy. Look here:

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

html {
  background-color: rgb(160,160,100);
}

body {
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
          align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
}

header {
  min-height: 40px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 40px;
      -ms-flex: 0 0 40px;
          flex: 0 0 40px;
  background-color: rgba(100, 100, 0, 0.4);
  overflow: hidden;
}

nav {
  min-height: 80px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 80px;
      -ms-flex: 0 0 80px;
          flex: 0 0 80px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
          align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.logo {
  min-width: 80px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  background-color: yellow;
  overflow: hidden;
}

.nav-wrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
          align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.nav-wrapper > div {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  overflow: hidden;
}

.nav-wrapper > div:first-child {
  background-color: blue;
}

.nav-wrapper > div:last-child {
  background-color: grey;
}

main {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
          align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

main > div {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 50%;
      -ms-flex: 1 1 50%;
          flex: 1 1 50%;
  -webkit-align-self: auto;
      -ms-flex-item-align: auto;
          align-self: auto;
  overflow: auto;
  line-height: 3em;
}

main > div:first-child {
  background-color: rgba(255, 0, 0, 0.4);
}

main > div:last-child {
  background-color: rgba(0, 100, 0, 0.4);
}
<header>
</header>
<nav>
  <div class="nav-wrapper">
    <div></div>
    <div></div>
  </div>
  <div class="logo"></div>
</nav>
<main class="main">
  <div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</main>

enter image description here

Example in CODEPEN