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

【问题标题】：Vertical scroll bars no longer appear when overflow is set to auto当溢出设置为自动时，不再出现垂直滚动条
【发布时间】：2012-06-13 21:04:20
【问题描述】：

我正在开发一个 JSP 站点。

我有 3 个主要的同心 div：

“容器”（包含整个站点）
“内容”（包含内容）
“结果”（“内容”内部，包含大量服务器生成的数据）

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

成功了。

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

<!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“结果”只应该和 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>

【问题讨论】：

您的 ID 标签中的空格是故意的吗？ O_o
什么空格？我没有看到任何空格，尽管这肯定会扼杀他通过 CSS 设置这些 id 样式的尝试 ....
我确实在 div 标签中的“=”和其他内容之间放置了空格。
我为你摆弄了它：jsfiddle.net/uaUJ5

标签： html vertical-scrolling css

【解决方案1】：

你确定你没有按照我说的去做吗？我刚刚在浏览器中转储了您的代码，并进行了更改

#results
{
    height: 40%;
}

到

#results
{
    height: 200px;
}

粉色盒子的行为符合我的预期和你想要的。

关于使用 % 代替 px：除非为容器设置固定高度，否则不能。

【讨论】：

我完全重写了我的问题以提高清晰度。我试过你的建议，不要骰子，还是谢谢。
所以我完全重写了我的答案，因为可能不够清楚，试一试 - 干杯
谢谢卢卡！你帮我度过了一个大头痛。有一天，我必须为我一直想参加的网页设计课腾出时间，或者完成那本 CSS 书籍的最后三分之一。

【解决方案2】：

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

【讨论】：

我完全重写了我的问题以提高清晰度。我试过你的建议，不要骰子，还是谢谢。
你为什么要这样做？看起来像疯狂的代码，需要一些解释。
对不起我的朋友们！我没听懂你的问题。

【解决方案3】：

好吧，既然你的元素都没有被赋予高度，那么 40% 的“某事”将永远不会被应用。

因此，为了解决您的情况，您必须在父分隔线的某处固定一些高度。

继续

【讨论】：