2009-09-07 8 views
11

ページの長さが十分でない場合、垂直バーはIE8に表示されません。 overflow:scroll;が、スクロールバーが両側に表示されます:FFでは、このIE8で垂直スクロールバーを表示するようにします。

html { 
    overflow: -moz-scrollbars-vertical; 
} 

の回避策がある私は、IE8のために次のことを試してみました。私はそれが縦だけのもので水平なものではない。 scroll-yは機能しません。

答えて

19

ああ、わかった。その

body { 
    overflow-y: scroll; 
} 
+0

の内側にありますか? – Kimble

+0

いいえ。 Chrome 9.0では動作しません。 – David

+0

また、W3Schoolのウェブサイトによると、IE8以前では動作しません。 –

8

で、私は次のように使用前/次を参照してください。

html { 
    height: 101%; /* setting height to 101% forces scroll bar to display */ 
} 
+0

チップありがとう! – Jason

7

-ms-overflow-y : scroll;をお試しください

4

divに入力してください。

01例えば
style="overflow: -moz-scrollbars-vertical; overflow-y: scroll; 

<div class="left" style="overflow: -moz-scrollbars-vertical; overflow-y: scroll; 
width: 230px; height: 500px;" > 
1
html {height: 100%; margin-bottom: 1px;} 

は、あなたのページは常に1ピクセル長いので、スクロールバーが常に表示され、それだけはなりませんので、十分な長されないページに1pxのスクロールを追加します視聴者は何か不足していると考えて、何の理由もなくスクロールします。シンプルで、すべてのメインストリームブラウザ(私がテストしたもの)

2

html、body { 高さ:100.1%; }

0
html { 
    height: 100%; 
    border-bottom: 1px #999 solid; 
} 

注:私はスクロールする必要はありません知っているページのスクロールバーを強制したかったです。この解決策はこのような状況のためである。

すべてのブラウザでJonesyの解決策がうまくいきませんでしたが、すべてのブラウザで一貫して動作するわずかな1pxの灰色のストライプが喜んでいます。私には1%の余分な余分なもの(チップのソリューション)を表示するよりも優れています。デザインは賢明ですが、それはあまり重要ではないため、譲歩することさえほとんどありません。試してみよう。

また、このソリューションは、未来の未来を保証するものです。他のソリューションのように空白スペースを追加したい場合は、将来のブラウザにどのような最適化が組み込まれるのかはわかりませんし、無駄な空白スペースを検出して削除するブラウザがあると思います(見知らぬことが起こっています)。 1pxを与えることによって、ブラウザーは何を問わずこの1ピクセルを処理することになります。

2

サファリに垂直スクロールバーを強制するためのこれまでの最高の回答(2012年5月)、オペラ& Firefoxは次のとおりです。

html { 
    height: 101%; /* setting height to 101% forces scroll bar to display */ 
} 
html { min-height: 100%; padding-bottom: 1px; } 

Operaは最も困難だっただけに関係なく、ページの高さを垂直スクロールバーを挿入しないだろう上記の両方のhtmlタグが使用されている場合

おかげで - ただ、推奨されているnormalize.cssに注意ダイアン

1

html { overflow-y: scroll; } 

アレックの答えとは少し異なりますが、それを落としたので、持っています。 HTML5 Boilerplateあたり:

次のスタイルは、もはやにより、ビューポートの寸法計算に依存している(モーダル またはドラッグアンドドロップのUIのような)JSプラグインと組み合わせるとFirefoxで発生する可能性がある問題 にデフォルトで含まれています。

実際、私の経験では、いくつかのjQueryプラグインが壊れています。

さまざまな最小高さ/マージンボトム/パディングボトムソリューションが好まれない理由はわかりませんが、オーバーフローが発生すると有効なスクロールバーが作成されます(ただし1pxの動きがあります)スクロールバー、それはより良いです。

0

オーバーフローを追加:htmlタグのcssで自動オーバーフロー。

0

まあ私のコードを参照して、データテーブルは、すべてのブラウザのためにこの仕事を1つのDIV

<div style="overflow-y: scroll; overflow-x: scroll; width: 44em; height: 17em;"> 
    <p:dataTable id="dataTableDeposito" lazy="true" style="width: 1040px; height: 240px; " 
       selection="#{envioValijaView.selectedItems}" 
       emptyMessage="#{msg.tablaVaciaDeposito}" 
       value="#{envioValijaView.valijaManagedBean.valijaBean.listaDepositos}" 
       var="tablaDepositos" 
       rowKey="#{tablaDepositos.idDespositoCheque}"> 


     <p:column sortBy="bancoBean.nombreBanco" headerText="#{label.fechaHora}" styleClass="texto_14" width="150"> 
       <h:outputLabel style="font-size: 12px; text-align: center;" value="#{label.cantDepositos}"/> 
     </p:column> 

     <p:column sortBy="nroCataporte" headerText="#{label.nroCataporte}" styleClass="texto_14" disabledSelection="#{true}" width="150"> 
      <p:commandLink action="#{envioValijaView.detalleDeposito}" value="#{tablaDepositos.idDespositoCheque}"> 
       <f:setPropertyActionListener value="#{tablaDepositos}" target="#{envioValijaView.depositoChequeBean}"/> 
      </p:commandLink> 
     </p:column> 

     <p:column sortBy="nroCheque" headerText="#{label.cantiDepositos}" styleClass="texto_14" width="155"> 
      <h:outputLabel value="#{label.montTotalDeposito}" styleClass="texto_12"/> 
     </p:column> 

     <p:column sortBy="monto" headerText="#{label.montoTotal}" styleClass="texto_14" width="150"> 
      <h:outputText value="#{tablaDepositos.montoDeposito}" styleClass="texto_12"> 
       <f:convertNumber pattern="#{envioValijaView.patronMoneda}"/> 
      </h:outputText> 
     </p:column> 

     <!-- Verificar --> 
     <p:column sortBy="monto" headerText="#{label.transportista}" styleClass="texto_14" width="150" > 
      <h:outputText value="#{tablaDepositos.montoDeposito}" styleClass="texto_12"> 
       <f:convertNumber pattern="#{envioValijaView.patronMoneda}"/> 
      </h:outputText> 
     </p:column> 

     <p:column sortBy="monto" headerText="#{label.estado}" styleClass="texto_14" width="150"> 
      <h:outputText value="#{tablaDepositos.montoDeposito}" styleClass="texto_12"> 
       <f:convertNumber pattern="#{envioValijaView.patronMoneda}"/> 
      </h:outputText> 
     </p:column> 
    </p:dataTable> 
</div> 
関連する問題