CODEWITHSUNDEEP
htmlcss
filip
filip

Reputation: 1503

Absolute div within relative div with 100% page height

I have following html, which needs to remain as it is:

<body>
    <div id="wrapper">
        <div id="content">some text</div>
    </div>
</body>

Now I need to make the content div to fill the page in 100%. I tried following CSS with no luck:

body {
    height: 100%;
}
#wrapper {
    position: relative;    
}
#content {
    position: absolute;
    background: red;
    height: 100%;
}

See here: http://www.cssdesk.com/hHZyD

Upvotes: 0

Views: 56

Answers (2)

Lal
Lal

Reputation: 14810

Check this fiddle

I've edited the CSS as

CSS

html,body {
    height: 100%;
}
#wrapper {
    position: relative; 
    height: 100%;
}
#content {
    position: absolute;
    background: red;
    height: 100%;
}

First of all, for height in percentage to work, height for html and `body should be set to 100% ie

html,body {
        height: 100%;
}

Next for the percentage to work, the parent div should be given a height.So i've changed the css to

#wrapper {
    position: relative; 
    height: 100%;
}

UPDATE

As @ctwheels specified in his comment, if the OP needs both height and width to be 100%,

Check the fiddle

Here i have set width to 100% for both the divs.

Upvotes: 2

4dgaurav
4dgaurav

Reputation: 11506

Demo

css

body, html {
    height: 100%;
    margin:0;
}
#wrapper {
    position: relative;
    height: 100%;
}
#content {
    position: absolute;
    background: red;
    width: 100%;
    height: 100%;
}

Upvotes: 0

Related Questions