scrolling div height = browser window height

DaveC426913 · Nov 8, 2006

I want to make a div whose content scrolls vertically, using overflow-y:scroll. But I want the div to fill the browser window top to bottom regardless of what height the browser is, such as a low screen rez

i.e. div height=100%

This doesn't work - since the content is very large, the dive sets itself to high enough to contain *all* the content *without* scrolling.

Vragabond · Nov 8, 2006

As long as the parent of your container has a specifically defined height, using height: 100%; inside a css style declaration for the element will work. If that will make the element large enough to fit all the content, there's not much you can do. Unless you abandon your 100% height thingy.

dkdude · Nov 10, 2006

Dave,

Try this :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <style type="text/css">
  * {
    margin : 0;
    pading : 0;
    border : 0;
  }

  html, body {
   height : 100%;
   overflow : auto;
  }

  .myBlock {
    height : 100%;
    overflow-y : auto;
    width : 100px;
    background : yellow;
  }
  </style>
</head>
<body>
  <div class="myBlock">
    <!-- Your stuff goes here -->
  </div>
</body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

scrolling div height = browser window height

DaveC426913

Programmer

Vragabond

Programmer

dkdude

Programmer

Similar threads

Part and Inventory Search

Sponsor