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の高さを設定するために、以下の2番目の回答の提案を試しました。高さをpxで設定しても、喜びはありません。可能であれば、高さを％sで設定する必要があります。

面倒なJSPの画面を保存し、問題に関係のないすべてのジャンクを取り除き、問題のデバッグを簡素化するためにCSSを先頭に置きました。以下の引用では、ブラウザとテキストエディタにドロップして問題を自分で確認できる単一の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>
4

3 に答える 3

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 に答える
0

私が言ったようにあなたがやろうとしなかったのは確かですか？ブラウザにコードをダンプして変更しました

#results
{
    height: 40%;
}

に

#results
{
    height: 200px;
}

ピンクのボックスは私が期待したとおりに動作し、あなたは望みました。

pxの代わりに％を使用することについて：コンテナに固定の高さを設定しない限り、使用できません。

于 2012-06-14T13:49:40.427 に答える