• 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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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




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

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.

1 Solution
div#nested2 {
     height: 50%;

This should make that second div scroll within the boundary.

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