小贝子编程

需要在我的xhtml页面的y轴滚动条



欢迎回复......我有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;
   }

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

overflow-y:scroll;
在要滚动的div上设置

，则它将垂直滚动。在您的示例中，我认为这是"windowContents"div，所以将其更改为:

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

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

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium