Forza la barra di scorrimento verticale da visualizzare in IE8

Question

La barra verticale non viene visualizzata in IE8 se la pagina non è abbastanza lunga. In FF, v'è una soluzione per questo

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

Ho provato quanto segue per IE8: overflow:scroll; ma appare la barra di scorrimento su entrambi i lati. Lo voglio solo per verticale e non orizzontale. scroll-y non funziona.

Qualsiasi soluzione?

Answer 1

Oh capito. La sua

body { 
    overflow-y: scroll; 
} 

Answer 2

Un'altra soluzione è quella di impostare l'altezza del corpo al 100% - vedere un prima/dopo esempio a http://www.iecustomizer.com/msmvp/HTMLHeightTest.htm

Answer 3

Io uso il seguente:

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

Answer 4

Prova

-ms-overflow-y : scroll;

Answer 5

immetterlo nel proprio

style="overflow: -moz-scrollbars-vertical; overflow-y: scroll; 

ad esempio:

<div class="left" style="overflow: -moz-scrollbars-vertical; overflow-y: scroll; 
width: 230px; height: 500px;" > 

Answer 6

html {height: 100%; margin-bottom: 1px;} 

Rende 1px più così appare sempre la pagina le barre di scorrimento sempre e aggiunge solo 1px di scorrimento per le pagine che non sono abbastanza a lungo in modo da non rendere la lo spettatore pensa che manchi qualcosa e scorri verso il basso senza motivo. Semplice e funziona in tutti i principali browser di flusso (che ho testato)

Answer 7

html, corpo { altezza: 100,1%; }

Answer 8

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

NOTA: ho voluto forzare la barra di scorrimento nelle pagine che so che non sarà necessario scorrere. Questa soluzione è per una situazione del genere.

La soluzione di Jonesy non ha funzionato per me in tutti i browser, ma sono disposto ad avere una striscia grigia 1px insignificante che funziona in modo coerente in tutti i browser. Per me è meglio che mostrare un pieno dell'1% in più (soluzione del chip). Design saggio, non è nemmeno una concessione perché è così insignificante: provalo e guarda cosa intendo.

Inoltre, questa soluzione sarà super-a prova di futuro. Se si desidera aggiungere uno spazio vuoto come le altre soluzioni, non si può dire quali ottimizzazioni verranno incorporate nei browser futuri e potrei immaginare un browser che rileva lo spazio vuoto sprecato e lo elimina (cose strane sono accadute). Concedendo 1px, stai costringendo il browser a gestire questo 1 pixel indipendentemente da cosa.

Answer 9

migliore risposta fino ad oggi (maggio 2012) per la forzatura barra di scorrimento verticale in Safari, Opera & Firefox è:

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

Opera è stato il più difficile e avrebbe solo inserire la barra di scorrimento verticale, non importa l'altezza della pagina se sono stati utilizzati entrambi i tag html sopra.

Grazie - Dianne

Answer 10

Basta notare che normalize.css consigliata:

html { overflow-y: scroll; } 

che è leggermente diverso da risposta di Alec, ma da allora lo lasciò cadere. Per HTML5 Boilerplate:

Lo stile segue non è più incluso di default a causa di problemi che possono sorgere in Firefox quando combinato con i plugin JS (come modali o drag-and-drop UI) che si basano su calcoli di dimensioni viewport .

E in effetti la mia esperienza è che scombina alcuni plugin jQuery.

Non sono sicuro del motivo per cui le varie soluzioni min-altezza/margine-basso/riempimento-fondo non sono preferite, ma creano una barra di scorrimento attiva (anche se con movimento 1px) mentre l'overflow-y crea un disabile scrollbar, che è più bello.

Answer 11

Aggiungi overflow: auto in css per tag html.

Answer 12

vedere bene il mio codice, DataTable è dentro 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>