CODEWITHSUNDEEP
css
Rafael Almeida
Rafael Almeida

Reputation: 10722

<div> with height=100% only fills one 'screenful'

Please check the following example:

http://www.esaer.com.br/csstest/

If the vertical scrollbar doesn't appear, please resize the window so it does. Problem is: when you scroll down, the portion of the screen that was hidden does not show the blue div background, which has height 100%, even though the red div forces the height of the 'page' overall be greater than one screen.

I want the blue background to span the entire page, even if the page is bigger than one screen. How can I make that happen? (I've been suggested a javascript solution already, but would prefer a css-only approach)

Thanks in advance!

Upvotes: 1

Views: 1196

Answers (5)

Rafael Almeida
Rafael Almeida

Reputation: 10722

"Solved" the issue by forcing a certain height (bigger than the fixed-size element) and living with the limitations.

Thank you for all the answers, though, they might be helpful in some other situations!

Upvotes: 0

Charlie
Charlie

Reputation: 9108

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Test</title>
<style type="text/css">
    body {
        margin: 0px;
        padding: 0px;
        overflow-y:hidden;
        overflow-x:hidden;
    }

    #main-div {
        width: 400px;
        height:100%;
        position: absolute;
        left: 10%;
        background: blue;
    }

    #sub-div {
        width: 200px;
        height: 200px;
        position: absolute;
        left: 50px;
        top: 400px;
        background: red;
    }
    #container{
        position:absolute;
        width:100%;
        height:100%;
        overflow-y:scroll;
        overflow-x:scroll;
    }
</style>
</head>
<body>
    <div id="main-div"></div>
    <div id="container">
        <div id="sub-div"></div>
    </div>
</body>
</html>

Upvotes: 1

Cesar Hermosillo
Cesar Hermosillo

Reputation: 942

If you use padding in the main div and then use a relative position in the inner div it could probably work, I'm not quite sure if you want this behavior at all, hopefully this could get you a little closer to what you looking for.

#main-div {
    background:blue none repeat scroll 0 0;
    height:100%;
    left:50%;
    margin-left:-200px;
    position:absolute;
    width:400px;
    padding:20;
}
#sub-div {
    background:red none repeat scroll 0 0;
    height:200px;
    left:50px;
    position:relative;
    width:200px;
    float:left;
}

Upvotes: 2

annakata
annakata

Reputation: 75844

100% mean 100% of the viewable area, i.e. the screen size so this is working as designed.

What you might be interested in is position: fixed although iirc older IEs have some issues with this: ref, ref2

Upvotes: 2

meder omuraliev
meder omuraliev

Reputation: 186562

Does the inner element matter? If not:

* { margin:0; padding:0; }
html, body { height:100%; }
#main-div { min-height:100%; width:400px; margin:0 auto; background:blue; }

<body><div id="main-div">test</div></body>

Upvotes: 2

Related Questions