0

我在一个 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 编辑框一样高，水平和垂直滚动条会根据需要出现。

结果.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>
4

3 回答 3

0

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

#results
{
    height: 40%;
}

至

#results
{
    height: 200px;
}

粉红色的盒子表现得和我预期的一样，你想要的。

关于使用 % 而不是 px：除非您为容器设置了固定高度，否则您不能这样做。

于 2012-06-14T13:49:40.427 回答
0

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

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

继续

于 2013-01-28T20:22:54.310 回答
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;}
于 2012-06-13T21:41:54.153 回答