Vertical scroll bars no longer appear when overflow is set to auto

StackOverflow https://stackoverflow.com/questions/11023270

  •  14-06-2021
  •  | 
  •  

Question

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>
Was it helpful?

Solution

Are you sure you didn't try to do as I said? I've just dumped your code in my browser, and changed 

#results
{
    height: 40%;
}

to

#results
{
    height: 200px;
}

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.

OTHER TIPS

div {overflow-x:hidden; } 
div {overflow-x:scroll; } 
div {overflow-x:visible;} 
div {overflow-x:auto;}
div {overflow-y:hidden; } 
div {overflow-y:scroll; } 
div {overflow-y:visible;} 
div {overflow-y:auto;}

Well, since none of your element is attributed an HEIGHT, then, 40% of 'something' will never be applyed.

So, to solve your situation, you have to fix some height somewhere on a parent divider.

Carry on

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top