1

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!

Davide De Santis
  • 922
  • 1
  • 10
  • 25
  • 1
    I know that this question is not about using bootstrap, BUT.... Using bootstrap would make this (and your life) 100% better. It would handle all of this stuff for you, as well as make your page responsive. – Evan Bechtol Apr 21 '16 at 13:33
  • give the header a % in height and the content the rest of the height in % ? Like 20% and 80% ? inside a 100% div – Nomistake Apr 21 '16 at 13:36
  • Have a look at: http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window – Drmzindec Apr 21 '16 at 13:37
  • Thanks for your answers! Unfortunately, bootstrap is not an option here. I'd have used bootstrap if I had the choice. Also, I cannot use a fixed height (px or %) for the header since the topmost div's height is dynamic, depending on the content. – Davide De Santis Apr 22 '16 at 08:05

1 Answers1

2

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;
  margin: 0;
}

main {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
}

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

nav {
  min-height: 80px;
  flex: 0 0 80px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;
}

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

.nav-wrapper {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;
}

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

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

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

.main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;
  overflow: auto;
}

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

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

.main > div:last-child {
  background-color: rgba(0, 100, 0, 0.4);
}
<main>
<header>
</header>
<nav>
  <div class="nav-wrapper">
    <div></div>
    <div></div>
  </div>
  <div class="logo"></div>
</nav>
<div 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>
</div>
</main>

enter image description here

Example in CODEPEN

Jan Franta
  • 1,691
  • 2
  • 16
  • 25
  • Your answer helped me create a layout with flex, thanks for that. However, there is one thing that is not working, neither with my version nor with yours: When the text in main > div is longer than the box, i want the box to have inline scrolling. Currently, however, it's just making main > div higher and disappearing (because of body->overflow: hidden) into the abyss. Any way to fix the max-height of the divs to the flex's full growth? – Davide De Santis May 04 '16 at 09:16
  • Well then there is something going wrong. Looking my codepen show me inline scrolling inside the main > div blocks. I add a screenshot to the answer so you can see the inline scoller on the left main > div. I also update the source here cause you do not need the body overflow hidden. – Jan Franta May 04 '16 at 09:51
  • That's really strange... I just opened your codepen in Edge, Internet Explorer 11 and Firefox, and it's not working. Which browser are you using? Is your codepen up to date? – Davide De Santis May 04 '16 at 12:03
  • Codepen is up to date and I use Firefox, Chrome, Safari, Opera and Vivaldi on OS X 10.11. I create the screen snapshoot from Chrome. – Jan Franta May 04 '16 at 12:06
  • I just checked again: it's working in Chrome, Vivaldi and IE, it's not working in Firefox and Edge, even if I set overflow: scroll. It seems as if it does not restrict the height of main > div to the body's height but instead expands everything. Any idea how that could be fixed in Edge & Firefox? – Davide De Santis May 04 '16 at 12:16
  • After a look on Windows FF/Edge found the problem and fix it. Updated the codepen and code snippet. – Jan Franta May 04 '16 at 12:33
  • Thanks, the codepen working now! It's not showing me the old version for comparison anymore, could you please explain what the issue was and how you fixed it? – Davide De Santis May 04 '16 at 12:48
  • 1
    1. Put flex not to body tag directly, but add a wrapper (main tag). (This is also the right way to use the main tag) 2. Remove overflow hidden from parents and add overflow auto to elements where overflow should occur. – Jan Franta May 04 '16 at 12:57