• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 285
  • 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.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

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