ansaurus

Question

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

Answer 1

+2 A:

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>

meder 2009-07-29 05:50:09

In fact, it does matter, since it's what is causing the scroll in the first place... edited the page to reflect a few of your modifications though...

Rafael Almeida 2009-07-29 05:58:56

If it's flexible enough I'd opt for the background on html element.

meder 2009-07-29 06:35:17

Answer 2

+1 A:

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

annakata 2009-07-29 05:57:32

Answer 3

+2 A:

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

chermosillo 2009-07-29 06:04:36

Answer 4

+1 A:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<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>

Charlie 2009-07-29 06:22:29

Works great. However, this takes the scrollbars out of place, which is undesireable...

Rafael Almeida 2009-07-30 04:05:38

You're right, the horizontal scroll was screwed up. I fixed it.

Charlie 2009-07-30 16:10:44

Answer 5

A:

"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!

Rafael Almeida 2009-09-14 23:30:12

ansaurus

tags:

views:

answers:

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

related questions