CODEWITHSUNDEEP
csshtmlabsolute
Michael
Michael

Reputation: 421

Absolute position background 100% of page height

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)

Upvotes: 0

Views: 6929

Answers (5)

Yudha Setiawan
Yudha Setiawan

Reputation: 386

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;
}

Upvotes: 0

Michael
Michael

Reputation: 421

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

Upvotes: 0

Yubraj Pokharel
Yubraj Pokharel

Reputation: 485

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

Upvotes: 2

ralph.m
ralph.m

Reputation: 14365

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;.

Upvotes: 1

Maria
Maria

Reputation: 548

Add this to your CSS

nav#primary {
    overflow: auto;
}

Upvotes: 2

Related Questions