1. 首页
  2. 问答
  3. 需要我的xhtml页面y轴的滚动条

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

2013-03-10 78 views
0

任何答案将高度赞赏......我有historyPopUp.xhtml页面。我必须显示超过100行。此页面从数据库中获取其值。所以它走出了它的领域。我如何将滚动添加到此页面？请帮助需要我的xhtml页面y轴的滚动条

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

来源

2013-03-10 Little bird

+0

[overflow-y]（https://developer.mozilla.org/en-US/docs/CSS/overflow-y）。 – Vucko 2013-03-10 19:00:23

+0

[在xhtml页面中添加滚动条]的可能的重复（http://stackoverflow.com/questions/15319599/adding-of-scroll-bar-in-xhtml-page） – partlov 2013-03-10 19:06:06

回答

2

的CSS溢出-Y的风格是你所需要的。如果你设置

overflow-y:scroll;

对你想要滚动的div，那么它将垂直滚动。在你的榜样，我认为这是“windowContents”分区，所以改变它是这样的：

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

你有例子很多CSS样式。您可能想简化它来调试此问题。像上面那样直接在HTML的div标签中设置样式将覆盖样式表中的任何其他overflow-y样式，并帮助您找出问题。

来源

2013-03-10 19:11:14

+0

Thanx ...它的工作原理:) – 2013-03-11 04:30:53

相关问题

 相关问题