Absolute Position Background 100% Of Page Height

February 28, 2024 Post a Comment

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 hav

Solution 1:

Add this to your CSS

nav#primary {
    overflow: auto;
}

Solution 2:

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

Solution 3:

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

Solution 4:

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

Solution 5:

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><headerid="topbar"></header><sectionid="container"><navid="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;
}

Build Html5