Header background isn't inheriting the set height

Question

I'm creating a website as a project and have run into a problem regarding the header. Basically the header is meant to be set height at 50% of the browser window, however, it only seems be as big as the content inside the header (2 headings).

I've uploaded this website to here

The HTML

<header role="banner" id="banner">
    <div class="not-fullscreen background bgheader1"" data-img-width="1600" data-img-height="1064">
        <div class="content-a">
            <div class="content-b">
                <h1>Manchester Metropolitan University</h1>
                <h2>Course Information</h2>
            </div>
        </div>
    </div>
</header>

The CSS -

header {
    min-height:50%;
    height:50%;
    width:100%;
}
.fullscreen,
.content-a {
    width:100%;
    min-height:100%;
}
.not-fullscreen,
.not-fullscreen .content-a,
.fullscreen.not-overflow,
.fullscreen.not-overflow .content-a {
    height:100%;
    overflow:hidden;
    min-height:50%;
}

/* content centering styles */
.content-a {
    display:table;
        height:50%;
}
.content-b {
    display:table-cell;
    position:relative;
    vertical-align:middle;
    text-align:center;
}

The rest of the information can be extracted from the website Any help will be appreciated

Thanks.

EDIT - It has to work with bootstraps sticky footer / fixed nav. Although html / body height does fix it, it also messes the footer up.

set height of the html and body to 100% – Armand Mar 05 '15 at 19:20 — Armand, Mar 05 '15 at 19:20

score 1 · Answer 1 · answered Mar 05 '15 at 19:20

1

Define a 100% height for your html and body elements:

html, body {
  height: 100%;
}

answered Mar 05 '15 at 19:20

Jonathan Nicol

3,158
1
21
22

score 0 · Answer 2 · answered Mar 05 '15 at 19:19

0

By default, the body only takes a height of the content within it, unless that content is more than the height of the window, in which case it'll overflow and you get your scrollbar.

You need to have your body take up 100% of the window, even when there's no/little content, using height:

html, body{
    height: 100%;
}

JSFiddle

answered Mar 05 '15 at 19:19

George

36,413
9
66
103

I forgot to add that it has to work with bootstraps fixed nav / sticky footer, adding this causes the footer to float in the middle of the page – Mo Martin Mar 05 '15 at 20:54

Header background isn't inheriting the set height

2 Answers2