当溢出设置为自动时，不再出现垂直滚动条

时间：2012-06-13 21:04:21

标签： html vertical-scrolling css

我正在开发一个JSP站点。

我有3个主要的同心div：

  • “容器”（包含整个网站）
  • “content”（包含内容）
  • “results”（在“content”中，包含大量服务器生成的数据）

我设置了CSS，这样当大量数据存放在div“results”中时，水平和垂直滚动条会自动出现。

有效。

直到我将这些标记添加到页面顶部以修复其他一些不相关的问题：

<!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">

我在下面的第二个答案中尝试了这个建议，在div中设置一个高度。即使我用px设置高度，也没有快乐。如果可能的话，我需要用％s设置高度。

我拿了一个屏幕保存了麻烦的JSP，拿出了与问题无关的所有垃圾，并把CSS intp放在头上以简化调试问题。在下面的引用中是一个HTML文件，您可以将其放入浏览器和文本编辑器中以查看自己的问题。粉红色div“results”应该与stackoverflow编辑框一样高，水平和垂直滚动条根据需要出现。

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>

3 个答案:

答案 0 :(得分：0)

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;}

答案 1 :(得分：0)

你确定你没有像我说的那样尝试吗？我刚刚在浏览器中转储了您的代码，并更改了

#results
{
    height: 40%;
}

到

#results
{
    height: 200px;
}

粉红色的盒子表现得和我想象的一样。

关于使用％代替px：除非您为容器设置固定高度，否则无法使用。

答案 2 :(得分：0)

好吧，既然你的元素都不属于高度，那么，40％的'某事'永远不会被应用。

因此，要解决您的情况，您必须在父分隔符的某处修复一些高度。

继续

相关问题
最新问题