Sticky header with %-height and 100% content sections

Question

I'd like to have a sticky header with a %-height property. Sections below the header should take up the remaining height of the page, for example: header=10% all other sections are atleast 90%. This is similar to a related question: CSS Sticky Header/Footer and Fully Stretched Middle Area?, but he's using fixed px-height whereas i want %-height. I tried to use margin on my section, but that doesn't seem to work. Not does it seem to work to use a margin and 90% height on my sections.

enter image description here

For the moment I was able to come up with: http://jsfiddle.net/K9m63/. But a few problems:

The first section dissapears underneath the header.
Because of point 1, the section div's are too high and therefore not taking the remaining size.

HTML

<header>
    <nav>Test</nav>
</header>
<section>
    <div class="container yellow">1</div>
</section>
<section>
    <div class="container pink">2</div>
</section>
<section>
    <div class="container purple">3</div>
</section>

CSS

body, html {
    height: 100%;
}
header {
    height: 10%;
    background-color: green;
    position: fixed;
    top: 0px;
    width: 100%;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.nav-image {
    vertical-align: middle;
}
section {
    height: 100%;
    width: 100%;
    background-color: red;
}
.container {
    width: 72.8125%;
    background-color: blue;
    margin: 0px auto;
    height: 100%;
}
.yellow {
    background-color: yellow;
}
.pink {
    background-color: pink;
}
.purple {
    background-color: purple;
}

Thanks!

why using `position: fixed; top: 0px;`? By removing it you can see the content of first div. — Kheema Pandey, Aug 06 '14 at 06:21
Because it needs to be sticky and stay on the same position (= top: 0px and fixed). — Velth, Aug 06 '14 at 06:26
then you can use `body{padding-top: 38px;}` so content could appear. check DEMO. http://jsfiddle.net/K9m63/1/ — Kheema Pandey, Aug 06 '14 at 06:31
I don't want any space between the header<>section<>{other sections}. Now they is space between those items which is not desired. On resizing my screen I get undesired effects with the use of a fixed padding (it has to be responsive ;-)). — Velth, Aug 06 '14 at 06:37
@Skynet thanks, altho I do not think a fixed px-padding is the way to go. On resizing I still end up with the section fading behind the header. And the sections are not taking up the remaining height, i.e. when i scroll down (the purple section) the number "3" dissapears out of the screen. — Velth, Aug 06 '14 at 06:47
what kind of response you are expecting for sections please can you be elaborate — Arnab Nandy, Aug 06 '14 at 06:51
thats because of padding added in section. you will required a fixed padding in `px`. — Kheema Pandey, Aug 06 '14 at 06:53

score 1 · Accepted Answer · answered Aug 06 '14 at 06:51

1

Possible solution:

I have wrapped all sections into 2 divs.

<div class="wrapper">//rest 90% of the page
    <div class="wrapper2">//100% of parent
        <section>
            <div class="container yellow">1</div>
        </section>
        <section>...
    </div>
</div>

CSS:

.wrapper {
    min-height:90%;
    height:auto !important;
    position:relative;
    top:10%;
}
.wrapper2 {
    height:100%;
    width:100%;
    position:absolute;
}

Also, add z-index:1; to header.

Updated fiddle here.

answered Aug 06 '14 at 06:51

codingrose

15,563
11
39
58

Looks to be exactly what I'm trying to achieve, thanks! – Velth Aug 06 '14 at 06:54
@Hiral a question tho.. would it also be possible to have it a min-height of 100%? So it'll grow whenever the content is too long for 100%? – Velth Aug 06 '14 at 16:59
1

@Velth 100% height of what? – codingrose Aug 07 '14 at 05:05
@Hiral a minimum of 100% (on the .wrapper2 class), so whenever the content of a
grows longer than 100%, but all the other wrapper2-classes stay default 100% (if suitable).
– Velth Aug 07 '14 at 05:13
@Velth I dont think so – codingrose Aug 07 '14 at 05:19
@Hiral and if I change to a fixed header height in pixel? – Velth Aug 07 '14 at 05:28
@Velth then you will need to change `min-height:90%` to some other value. – codingrose Aug 07 '14 at 08:07

score 0 · Answer 2 · answered Feb 05 '19 at 02:03

Based on your drawing, this is how you could* do it. - but there's also "fixed" / or "Sticky" positioning. - and this layout would force you to implement your own scroll below - in the page content, which is a pain.

html, body {
  height: 100vh; /* you can use vh or % - but either way... */
  height: 100%; /* they don't know their own height... how would they? */
}

body {
  margin: 0;
}

.site-header {
  background: #ff6666;
  height: 10%;
}

.page-content {
  background: #6666ff;
  height: 90%;
}

<header class="site-header">
  header
</header>

<main class="page-content">
  main
</main>

Sticky header with %-height and 100% content sections

2 Answers2