I am working on a JSP site.
I have 3 main concentric divs:
- “container” ( contains the entire site )
- “content” ( contains the content )
- “results” ( inside of “content”, contains a large amount of server generated data )
I set up the CSS so that when a large amount of data is deposited in the div “results” horizontal and vertical scroll bars would appear automagically.
It worked.
Until I added these tags to the top of the page to fix some other unrelated problems:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
I tried the suggestion in the second answer below, to set a height in the divs. No joy, even when I set the height with px. I need to set the height with %s, if possible.
I took a screen save of the troublesome JSP, took out all of the junk not related to the problem and put the CSS intp the head to simplify debugging the problem. In the quote below is a single HTML file you can drop into a browser and a text editor to see the issue for yourself. The pink div “results” is only supposed to be about as high as the stackoverflow edit box, with horizontal and vertical scroll bars appearing as needed.
results.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Staff Directory</title>
<style type="text/css">
body{background:white;}
#container
{
margin-left:auto;
margin-right:auto;
text-align:center;
width: 95%;
background: white;
font-family:Arial,Helvetica;
}
/* Main Content Area **********************************************************/
#content
{
clear: left;
padding: 20px;
text-align:center;
margin-left:auto;
margin-right:auto;
background:yellow;
}
#content h2
{
color: #000;
font-size: 160%;
margin: 0 0 .5em;
}
.content_center
{
display: inline-block;
}
.content_center td
{
text-align:left;
}
/* horizontal button bar */
.button_bar
{
margin-left:auto;
margin-right:auto;
margin-top: 2%;
margin-bottom: 2%;
padding-bottom: 2%;
width:100%;
height:auto;
vertical-align:top;
}
/* put a button on the far right of the above button bar */
.button_bar_right_button
{
float:right;
margin-left:1%;
vertical-align:top;
}
/* put a button on the far left of the above button bar */
.button_bar_left_button
{
float:left;
margin-left:1%;
vertical-align:top;
}
/* table field names */
#fieldLabel
{
font-weight:bold;
}
/* results.jsp ****************************************************************/
#results
{
overflow:auto;
margin-left:auto;
margin-right:auto;
height:40%;
width: 100%;
background:pink;
}
#results td
{
white-space: nowrap;
font-size:11px;
text-align:left;
}
#results th
{
white-space: nowrap;
background:silver;
}
</style>
</head>
<body>
<div id="container">
<!-- Content: Start div content: Main content area -->
<div id="content">
<h1>Div "Content" </h1>
<form id="command" name="f" action="employee" method="post">
<div id="results">
<center>
<h1>Div "Results"</h1>
</center>
<table>
<tr>
<td>
Start: A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. The End.
</td>
</tr>
</table>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh
euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh
euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh
euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh
euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div> <!--END: div id="results" -->
<div class="button_bar">
<div class="button_bar_left_button">
<input value="Request More Information" name="buttonRequestMoreInformation" type="submit">
</div>
<div class="button_bar_left_button">
<input value="Start New Search" onclick="location.href='search'" name="buttonSearch" type="button">
</div>
<div class="button_bar_right_button">
<input value="Add Member" onclick="document.formAddButton.submit();" name="buttonAddMember" type="button">
</div>
</div><!-- end div button_bar -->
</form><!-- end form 'f', main form -->
<form name="formAddButton" action="initialRequest" method="post">
<input name="NextRequest" value="Add Member" type="hidden">
</form>
</div><!-- Content: Close div id ="content" -->
</div><!-- end div container -->
</body>
</html>
Are you sure you didn’t try to do as I said? I’ve just dumped your code in my browser, and changed
to
and the pink box behaved as I expected and you wanted.
About using % instead of px: you can’t unless you set a fixed height to the container.