Absolute position background 100% of page height

Question

I am having trouble with giving my absolute positioned element a 100% height so it covers the entire page rather than just the screen height.

I am using LESS and this is what I have so far:

html, body {
    height: 100%;
    position: relative;
}

div#top-bar {
    background: #333;
    height: 50px;
    width: 100%;
}

nav#primary {
    background: #333;
    bottom: 0;
    min-height: 100%;
    left: -100%;
    padding-top: 50px;
    position: absolute;
    top: 0;
    width: 100%;
}

This gives me a nav#primary height of 100% but that isn't the page height, it's the screen height.

See this image: Android image

I want the background to be the full height of the page, not the screen (so it covers the entire nav#primary)

Once remove `padding-top: 50px;` from `nav#primary` and check. — Mr_Green, Aug 12 '13 at 08:52
It still has a smaller issue (like 20px), I require the padding-top to clear the Top Bar (50px height). — Michael, Aug 12 '13 at 08:55
Give `left: 0` and `right: 0` in `nav#primary`. (remove `left: -100%;`) — Mr_Green, Aug 12 '13 at 09:01

score 2 · Answer 1 · answered Aug 12 '13 at 08:51

2

Add this to your CSS

nav#primary {
    overflow: auto;
}

answered Aug 12 '13 at 08:51

Maria

548
2
8

Okay, now I have a weird overflow issue see image: http://i.imgur.com/PaV4Tby.png – Michael Aug 12 '13 at 08:54
than try with overflow-y: auto? Your initial problem is that div's height is 100% of the viewport, not auto and overflow defaults to visible. So we must try to add the scrollbar to the div instead of body. – Maria Aug 12 '13 at 08:58
Okay that puts a different spin on things, I will see what I can come up with. – Michael Aug 12 '13 at 09:01

score 2 · Answer 2 · answered Aug 12 '13 at 09:02

2

nav#primary {
background-image:url(../images/onlinekhabar.jpg);
        background-size:100% 100%;
}

answered Aug 12 '13 at 09:02

Yubraj Pokharel

477
8
23

score 1 · Answer 3 · answered Aug 12 '13 at 08:58

1

Unless nav#primary containing all other content on the page, you can't set it to height: 100%. Have you considered using a background image on the body element? You can force the image to fill the screen with something like background-size: cover;.

answered Aug 12 '13 at 08:58

ralph.m

13,468
3
23
30

score 0 · Answer 4 · answered Aug 12 '13 at 09:29

Firstly, many thanks for all your help I wouldn't of done this without you guys.

I've managed to somehow get this working, my first step was to remove the absolute positioning from the nav#primary and use margin-left rather than the left option. I also needed to float left and display inline.

For my content div#main I also needed to float left and display inline. This is where for my mobile first approach I position:absolute it (so my navigation can overlay it). My small media query (min-height: 768px), set the position back to default (static).

In my jQuery I then needed to add this code to get the min-height to change based on the window height. (Note: min-height not height)

menu.css('minHeight', (jQuery(window).height() - 50) + 'px');

The -50 was to remove my topbar height.

The results:

Mobile:

Android

Tablet:

Tablet

score 0 · Answer 5 · answered Aug 12 '13 at 20:53

It's because you set relative position at the body. Try to wrap your nav tag with the container and give relative position.

Something like this.

HTML :

<body>
    <header id="topbar"></header>
    <section id="container">
        <nav id="primary"></nav>
    </section>
</body>

CSS :

html, body {
    height: 100%;
}

header#top-bar {
    background: #333;
    height: 50px;
    width: 100%;
}

section#container {
    padding-top: 50px;
    position: relative;
    min-height: 100%;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    background: #333;
}

nav#primary {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

Absolute position background 100% of page height

5 Answers5

Linked