html - 在我的 xhtml 页面的 y 轴上需要一个滚动条

Question

任何答案将不胜感激......我有 historyPopUp.xhtml 页面。我必须在其中显示超过 100 行。此页面正在从数据库中获取其值。所以它走出了它的区域。如何在此页面中添加滚动？请帮忙

 <!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" 
    xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:a4j="http://richfaces.org/a4j">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" rel="stylesheet" href="../css/global.css" />
   </head>
  <body>
<div class="windowContents">
<fieldset>
    <a4j:form style="width: 700px; height: 500px" ajaxSubmit="true" 
      id="historyPopUp">
    <h:outputText style="font-weight:bold" value="#
            {dataEntryAction.selectedAddress.originalAddress}"/>
        <ui:repeat value="#{dataEntryAction.hdiGdvHistoryList}" 
           var="address">
            <br />
            <br />
            <table border="0" style="font-size: 12px; width: 100%;">
                <col class="boldedStyle" align="right" valign="top"
                style="width: 170px;" />
                <col valign="top" />
                <tr>
                    <td><h:outputText style="float: left; 
     padding-right: 10px; padding-top: 10px;" class="boldedStyle" value="#
      {address.dateCreated}"/></td>
                </tr>

                <tr>
                    <td><h:outputText style="float: left; 
    padding-right: 10px; padding-top: 10px;" value="#{address.messageHistory}"/></td>
                </tr>
            </table>
        </ui:repeat>
        <br />
        <h:panelGroup rendered="#{!addressesAction.approved}">
            <span 
                     onclick="javascript:Richfaces.hideModalPanel('editedHistoryDetailPanel');document.getElementById('dataEnrtyContainer:dataEnrtyTable:inputMDBI').focus();">
                <img src="../images/buttons/ok.gif" alt="okay" />
            </span>
        </h:panelGroup>
    </a4j:form>
</fieldset>
</div>
</body>
</html>

global.css

这是CSS

  body {
overflow-x: hidden;
border-bottom: 5px solid #c65606;
}

    body,p {
font: 11px Arial, Helvetica, sans-serif;
color: #111111;
margin: 0px;
padding: 0px;
   }

   p.underlined {
border-bottom: 1px solid #bfbfbf;
padding-bottom: 2px;
margin-bottom: 3px;
    }



     h4 {
color: #362263;
margin: 45px 40px 10px 0px;
padding: 0px;
     }

     h4.pageTitle {
font-size: 48px;
font-weight: normal;
      }

     h1 {
color: #362263;
margin: 0px 0px 10px 0px;
padding: 0px;
     }

     h1.pageTitle {
font-size: 48px;
font-weight: normal;
     }

     h1.boxOrange {
color: #ffffff;
text-transform: uppercase;
background: url(../images/box_orange_bg.gif) no-repeat;
font-size: 14px;
padding: 6px 10px 18px 10px;
margin: 0px;
    }

    h2 {
color: #c65606;
font-size: 12px;
margin: 0px 0px 6px 0px;
padding: 0px;
     }

      h5 {
color: #c65606;
font-size: 12px;
margin: 0px 0px 6px 0px;
padding: 0px;
width: 100px;
    }

    h3 {
margin: 0px;
padding: 0px;
text-transform: uppercase;
font-size: 12px;
    }

    img.logo {
margin: 8px 0px 10px 0px;
float: left;
width: 200px;
height: 68px
     }

    a img {
border: none;
       }

     a {
color: #c65606;
     }

     .selectDisabled {
width: 55px;
border: none;
background: #FFFFFF;
color: #000000;
padding: 3px;
   }

     .mainContainer {
margin-right: 30px;
margin-left: 30px;
overflow-x: hidden;
        }



    .header .navigation {
float: right;
       }

    .header .navigation ul {
margin: 0px;
padding: 0px;
    }

     .header .navigation ul li {
list-style: none;
margin: 0px 0px 0px 10px;
padding: 40px 9px 10px 9px;
background: #c65606;
float: left;
     }

    .header .navigation ul li a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
   }

  .pageBody {
margin-top: -10px;
    }

    .pageBody .selections {
margin-bottom: 50px;
     }

     .pageBody .selections .subCol {
width: 100px;
margin-right: 20px;
float: left;
      }

   .pageBody .selections .subCol select {
width: 55px;
border: none;
background: #c65606;
color: #ffffff;
padding: 3px;
     }

     .pageBody .dataTable {
position: relative;
margin-top: -30px;
margin-bottom: 50px;
     }

     .pageBody .dataTable .frameContainer {
border: 1px solid #431d02;
margin: 0px;
padding: 0px;
width: 99%;
     }

  .pageBody .dataTable .frameContainer .scroll {
height: 300px;
overflow-y: scroll;
overflow-x: hidden;
scrollbar-base-color: #c65606;
scrollbar-arrow-color: #ffffff;
scrollbar-DarkShadow-Color: #252525;
      }

    .pageBody .dataTable .frameContainer .scroll table {
width: 98.3%;
text-align: left;
     }

   .pageBody .dataTable .frameContainer .scroll table tr.head {
background: #c65606;
     }

    .pageBody .dataTable .frameContainer .scroll table tr.alt {
background: #fff8c9;
      }

   .pageBody .dataTable .frameContainer .scroll table tr td .miniScroll {
height: 155px;
overflow-y: scroll;
padding: 2px 5px;
     }

   .pageBody .dataTable .frameContainer .scroll table tr.head th {
padding: 10px 8px;
color: #ffffff;
     }

   .pageBody .dataTable .frameContainer .scroll table td {
vertical-align: top;
padding: 8px;
border-bottom: 1px solid #bfbfbf;
border-right: 1px solid #bfbfbf;
     }

    .pageBody .dataTable .frameContainer .scroll table td td {
border: none;
padding: 0px;
       }

    .pageBody .dataTable .frameContainer .scroll table.small th {
font-size: 11px;
       }

   .pageBody .dataTable .frameContainer .scroll table.small td,.pageBody .dataTable 
   .frameContainer .scroll table.small td p,.pageBody .dataTable .frameContainer 
   .scroll table.small input
{
font-size: 10px;
     }

    .pageBody .dataTable .frameContainer .scroll table.small input {
margin: 0px;
padding: 0px;
     }

   .pageBody .buttons {
position: relative;
margin-top: -50px;
padding-bottom: 20px;
     }



   .pageBody .dataTable .frameContainer .scroll table td.center {
vertical-align: middle;
      }

     .pageBody .dataTable .frameContainer .scroll table tr td.noPadding {
padding: 0px;
      }

      .pageBody .col1 {
float: left;
width: 246px;
      }

    .pageBody .col2 {
float: left;
width: 246px;
margin-left: 45px;
     }

         .pageBody .col3 {
float: left;
width: 246px;
margin-left: 45px;
      }

      .pageBody .contents {
padding: 0px 10px 60px 10px;
       }

     input.short {
font: 10px Arial, Helvetica, sans-serif;
width: 25px;
padding: 0px;
     }

      input.impact {
font: 10px Arial, Helvetica, sans-serif;
width: 125px;
padding: 0px;
       }


   .closerBar {
background: #c65606;
width: 100%;
    }

    .pageBody .dataTable .frameContainer .scroll1 {
height: 300px;
overflow-y: scroll;
overflow-x: hidden;
scrollbar-base-color: #c65606;
scrollbar-arrow-color: #ffffff;
scrollbar-DarkShadow-Color: #252525;
     }

    .pageBody .dataTable .frameContainer .scroll1 table {
width: 98.3%;
text-align: left;
     }

     .pageBody .dataTable .frameContainer .scroll1 table tr.head {
background: #c65606;
      }

   .pageBody .dataTable .frameContainer .scroll1 table tr.alt {
background: #fff8c9;
      }

   .pageBody .dataTable .frameContainer .scroll1 table tr td .miniScroll {
height: 155px;
overflow-y: scroll;
padding: 2px 5px;
     }

    .pageBody .dataTable .frameContainer .scroll1 table tr.head th {
padding: 10px 8px;
color: #ffffff;
    }

   .pageBody .dataTable .frameContainer .scroll1 table td {
vertical-align: top;
padding: 4px;
border-bottom: 1px solid #bfbfbf;
border-right: 1px solid #bfbfbf;
    }

  .pageBody .dataTable .frameContainer .scroll1 table td td {
border: none;
padding: 0px;
     }

    .pageBody .dataTable .frameContainer .scroll1 table.small th {
font-size: 11px;
    }

   .pageBody .dataTable .frameContainer .scroll1 table.small td,.pageBody .dataTable
    .frameContainer .scroll table.small td p,.pageBody .dataTable .frameContainer 
     .scroll table.small input
{
font-size: 10px;
    }

    .pageBody .dataTable .frameContainer .scroll1 table.small input {
margin: 0px;
padding: 0px;
      }

   .pageBody .buttons {
padding-bottom: 0px;
    }

   .pageBody .buttons img {
margin-right: 15px;
     }

    .pageBody .dataTable .frameContainer .scroll1 table td.center {
vertical-align: middle;
         }

    .pageBody .dataTable .frameContainer .scroll1 table tr td.noPadding {
padding: 0px;
     }

   .pageBody .dataTable .frameContainer .scroll2 {
height: 350px;
width: 1060px;
overflow-y: scroll;
overflow-x: scroll;
scrollbar-base-color: #c65606;
scrollbar-arrow-color: #ffffff;
scrollbar-DarkShadow-Color: #252525;
    }

  .pageBody .dataTable .frameContainer .scroll2 table {
width: 98.3%;
text-align: left;
     }

    .pageBody .dataTable .frameContainer .scroll2 table tr.head {
background: #c65606;
     }

   .pageBody .dataTable .frameContainer .scroll2 table tr.alt {
background: #fff8c9;
      }

   .pageBody .dataTable .frameContainer .scroll2 table tr td .miniScroll {
height: 155px;
overflow-y: scroll;
padding: 2px 5px;
    }

   .pageBody .dataTable .frameContainer .scroll2 table tr.head th {
padding: 10px 8px;
color: #ffffff;
    }

    .pageBody .dataTable .frameContainer .scroll2 table td {
vertical-align: top;
padding: 4px;
border-bottom: 1px solid #bfbfbf;
border-right: 1px solid #bfbfbf;
font-size: 12px;
     }

   .pageBody .dataTable .frameContainer .scroll2 table td td {
border: none;
padding: 0px;
     }

    .pageBody .dataTable .frameContainer .scroll2 table.small th {
font-size: 11px;
     }

  .pageBody .dataTable .frameContainer .scroll2 table.small td,.pageBody .dataTable 
   .frameContainer .scroll table.small td p,.pageBody .dataTable .frameContainer 
     .scroll       table.small input
{
font-size: 10px;
    }

  .pageBody .dataTable .frameContainer .scroll2 table.small input {
margin: 0px;
padding: 0px;
     }

   .pageBody .buttons {
padding-bottom: 20px;
     }

    .pageBody .buttons img {
margin-right: 15px;
       }

    .pageBody .dataTable .frameContainer .scroll1 table td.center {
vertical-align: middle;
     }

     .pageBody .dataTable .frameContainer .scroll1 table tr td.noPadding {
padding: 0px;
        }

    .pageBody .dataTable .frameContainer .scroll3 {
height: 30px;
overflow-y: none;
overflow-x: none;
scrollbar-base-color: #c65606;
scrollbar-arrow-color: #ffffff;
scrollbar-DarkShadow-Color: #252525;
    }

    .pageBody .dataTable .frameContainer .scroll3 table {
width: 100%;
text-align: left;
     }

   .pageBody .dataTable .frameContainer .scroll3 table tr.head {
background: #c65606;
    }

   .pageBody .dataTable .frameContainer .scroll3 table tr.alt {
background: #fff8c9;
    }

  .pageBody .dataTable .frameContainer .scroll3 table tr td .miniScroll {
height: 30px;
overflow-y: scroll;
padding: 2px 5px;
     }

   .pageBody .dataTable .frameContainer .scroll3 table tr.head th {
padding: 10px 8px;
color: #ffffff;
    }

    .pageBody .dataTable .frameContainer .scroll3 table td {
vertical-align: top;
padding: 4px;
border-bottom: 1px solid #bfbfbf;
border-right: 1px solid #bfbfbf;
    }

   .pageBody .dataTable .frameContainer .scroll3 table td td {
border: none;
padding: 0px;
    }

   .pageBody .dataTable .frameContainer .scroll3 table.small th {
font-size: 11px;
     }

   .pageBody .dataTable .frameContainer .scroll3 table.small td,.pageBody .dataTable 
   .frameContainer .scroll table.small td p,.pageBody .dataTable .frameContainer 
    .scroll table.small input
{
font-size: 10px;
    }

  .pageBody .dataTable .frameContainer .scroll3 table.small input {
margin: 0px;
padding: 0px;
     }

    .pageBody .buttons {
padding-bottom: 0px;
            }

   .pageBody .buttons img {
margin-right: 15px;
     }

    .pageBody .dataTable .frameContainer .scroll3 table td.center {
vertical-align: middle;
      }

    .pageBody .dataTable .frameContainer .scroll3 table tr td.noPadding {
padding: 0px;
      }

    .pageBody .selections {
margin-bottom: 50px;
width: 950px;
   }

    .pageBody .selections .subCol {
width: 130px;
margin-right: 20px;
float: left;
     }

    .pageBody .selections .subCol select {
width: 115px;
border: none;
background: #c65606;
color: #ffffff;
padding: 3px;
     }

    .pageBody .dataTable {
margin-bottom: 50px;
     }

 .pageBody .dataTable .frameContainer {
border: 1px solid #431d02;
margin: 0px;
padding: 0px;
width: 99%;
   }

   .pageBody .dataTable .frameContainer .scroll4 {
height: 222px;
overflow-y: none;
overflow-x: hidden;
scrollbar-base-color: #c65606;
scrollbar-arrow-color: #ffffff;
scrollbar-DarkShadow-Color: #252525;
     }

       .pageBody .dataTable .frameContainer .scroll4 table {
width: 100%;
text-align: left;
      }

     .pageBody .dataTable .frameContainer .scroll4 table tr.head {
background: #c65606;
        }

      .pageBody .dataTable .frameContainer .scroll4 table tr.alt {
background: #fff8c9;
      }

   .pageBody .dataTable .frameContainer .scroll4 table tr td .miniScroll {
height: 155px;
overflow-y: scroll;
padding: 2px 5px;
     }

   .pageBody .dataTable .frameContainer .scroll4 table tr.head th {
padding: 10px 8px;
color: #ffffff;
      }

    .pageBody .dataTable .frameContainer .scroll4 table td {
vertical-align: top;
padding: 8px;
border-bottom: 1px solid #bfbfbf;
border-right: 1px solid #bfbfbf;
     }

   .pageBody .dataTable .frameContainer .scroll4 table td td {
border: none;
padding: 0px;
    }

    .pageBody .dataTable .frameContainer .scroll4 table.small th {
font-size: 11px;
     }

  .pageBody .dataTable .frameContainer .scroll4 table.small td,.pageBody .dataTable 
  .frameContainer .scroll table.small td p,.pageBody .dataTable .frameContainer .scroll
    table.small input
{
font-size: 10px;
     }

   .pageBody .dataTable .frameContainer .scroll4 table.small input {
margin: 0px;
padding: 0px;
      }

     .pageBody .buttons {
padding-bottom: 20px;
           }

       .pageBody .buttons img {
margin-right: 15px;
         }

    .pageBody .dataTable .frameContainer .scroll4 table td.center {
vertical-align: middle;
         }

      .pageBody .dataTable .frameContainer .scroll4 table tr td.noPadding {
padding: 0px;
      }

   .pageBody .dataTable .frameContainer .scrollv {
width: 1825px;
height: 225px;
overflow-y: scroll;
overflow-x: hidden;
scrollbar-base-color: #c65606;
scrollbar-arrow-color: #ffffff;
scrollbar-DarkShadow-Color: #252525;
     }

    .pageBody .dataTable .frameContainer .scrollv table {
text-align: left;
     }

   .pageBody .dataTable .frameContainer .scrollv table tr.head {
background: #c65606;
    }

    .pageBody .dataTable .frameContainer .scrollv table tr.alt {
background: #fff8c9;
     }

   .pageBody .dataTable .frameContainer .scrollv table tr td .miniScroll {
height: 155px;
overflow-y: scroll;
padding: 2px 5px;
     }

  .pageBody .dataTable .frameContainer .scrollv table tr.head th {
padding: 10px 8px;
color: #ffffff;
    }

  .pageBody .dataTable .frameContainer .scrollv table td {
vertical-align: top;
padding: 4px;
border-bottom: 1px solid #bfbfbf;
border-right: 1px solid #bfbfbf;
   }

   .pageBody .dataTable .frameContainer .scrollv table td td {
border: none;
padding: 0px;
      }

   .pageBody .dataTable .frameContainer .scrollv table.small th {
font-size: 11px;
   }

  .pageBody .dataTable .frameContainer .scrollv table.small td,.pageBody .dataTable  
   .frameContainer .scroll table.small td p,.pageBody .dataTable .frameContainer 
   .scroll table.small input
{
font-size: 10px;
    }

  .pageBody .dataTable .frameContainer .scrollv table.small input {
margin: 0px;
padding: 0px;
     }

    .underline {
text-decoration: underline;
      }

   .assgnHead {
background-color: #c65606;
     }

   .homepagelink,a {
font-weight: bold;
color: #000000;
font-size: 12px;
text-decoration: underline;
     }

    .homepagelink,a:hover {
font-weight: bold;
color: #000000;
font-size: 12px;
text-decoration: underline;
     }

  .homepagelink {
font-weight: bold;
color: #000000;
font-size: 12px;
text-decoration: none;
   }

  .disabledLink {
font-weight: bold;
color: #CCCCC0;
font-size: 12px;
   }

score 2 · Accepted Answer

CSS overflow-y 样式是您所需要的。如果你设置

overflow-y:scroll;

在您要滚动的 div 上，然后它将垂直滚动。在您的示例中，我认为这是“windowContents” div，因此将其更改为：

<div class="windowContents" style="overflow-y:scroll;">

示例中有很多 CSS 样式。您可能希望简化它以调试此问题。像我上面所做的那样直接在 HTML 中的 div 标记上设置样式将覆盖样式表中的任何其他溢出-y 样式并帮助您隔离问题。

html - 在我的 xhtml 页面的 y 轴上需要一个滚动条

1 回答 1

Related

Reference