• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 281
  • Last Modified:

Percentage Scrolling In Browser

Hello All,

I have the following html code in my page. Now this works great for 100% height on my page.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Blurb</title>
<style>
<!--

html,body {
      margin: 0;
      padding: 0;
}

div {
      border: 10px solid #000000;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
}

div#test {
      height: 100%;
}

div#nested {
      height: 50%;
}

div#nested2 {
      height: 50%; sc
}

-->
</style>

</head>

<body>

<div id="test">
      <div id="nested">
                 Nested div with height: 50%
      </div>
  <div id="nested2">
      Main div with height: 50%
  </div>
</div>
</body>
</html>

Now the problem I need to solve is that i need to be able to store unlimited data in the second div (nested2) but i don't want this to stretch outside of the browser window. Instead I want the second div (nested2) to scroll within it's 50% boundaries.

Sorry if that makes no sense. The long term goal is to create a popup with concrete data on the first div and a dataset on the second div that will contain dynamic data that will forever change.

Please Help.

Thanks
0
goldsmithwilliams
Asked:
goldsmithwilliams
1 Solution
 
MrRioCommented:
div#nested2 {
     height: 50%;
     overflow:auto;
}

This should make that second div scroll within the boundary.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now