Scenario: Creating a website where the central white section (the 'wrapper' div) serves as the background for all content, while the red sections on either side (the 'body') act as borders. When I remove the 100% bottom-padding from the 'wrapper' div, the content's background defaults to red (from the 'body' instead of the 'wrapper'). However, keeping the 100% bottom-padding causes the page to scroll beyond the actual content length (even though everything fits on one page). This excess scrolling is not desired; I want the scrolling limit to match the actual content length.
Please provide guidance on how to maintain the content's background as the wrapper div without enabling excessive scrolling. The example code should demonstrate the inability to scroll past the initial screen due to no content present. Currently, the code allows for scrolling equivalent to my live website despite minimal content.
<!doctype html>
<html>
<head>
<title>Bob</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" contents="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial scale=1" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
body {
height: 100%;
background-color:red;
margin:0 auto;
}
#wrapper {
width:600px;
height: 100%;
margin:0 auto;
background-color: white;
padding-top:8px;
/* Removed bottom-padding and eliminated whitespace at the bottom */
padding-left: 20px;
padding-right:20px;
}
</style>
</head>
<body>
<div id="wrapper"></div>
</body>
</html>