Force la barre de défilement verticale à afficher dans IE8

Question

La barre verticale n'apparaît pas dans IE8 si la page n'est pas assez longue. Dans FF, il existe une solution pour cette

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

J'ai essayé ce qui suit pour IE8: overflow:scroll; mais la barre de défilement apparaît sur les deux côtés. Je le veux seulement pour vertical et non horizontal. scroll-y ne fonctionne pas.

Une solution?

Answer 1

Oh, je l'ai compris. Son

body { 
    overflow-y: scroll; 
} 

Answer 2

Une autre solution est de régler la hauteur du corps à 100% - voir un avant/après exemple à http://www.iecustomizer.com/msmvp/HTMLHeightTest.htm

Answer 3

J'utilise les éléments suivants:

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

Answer 4

Essayez

-ms-overflow-y : scroll;

Answer 5

mettez-le dans votre div

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

par exemple:

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

Answer 6

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

Makes votre page toujours 1px plus pour que les barres de défilement apparaissent toujours et ne fait qu'ajouter 1px défiler les pages qui ne sont pas assez longtemps pour qu'il ne fait pas la spectateur pense qu'ils manquent quelque chose et défiler vers le bas sans raison. Simple et fonctionne dans tous les principaux navigateurs (que j'ai testé)

Answer 7

html, corps { hauteur: 100,1%; }

Answer 8

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

NOTE: Je voulais forcer la barre de défilement des pages que je sais ne sera pas nécessaire de faire défiler. Cette solution est pour une telle situation.

La solution de Jonesy n'a pas fonctionné pour moi dans tous les navigateurs, mais je suis disposé à avoir une bande grise 1px insignifiante qui fonctionne de manière cohérente dans tous les navigateurs. Pour moi, c'est mieux que de montrer un supplément de 1% (la solution de la puce). Du point de vue du design, ce n'est même pas une concession car c'est tellement insignifiant - essayez-le et voyez ce que je veux dire.

En outre, cette solution va être très évolutive. Si vous voulez ajouter un espace vide comme les autres solutions, vous ne savez pas quelles optimisations seront intégrées dans les futurs navigateurs et je pourrais imaginer un navigateur qui détecterait l'espace vide gaspillé et l'éliminerait (des choses plus étranges sont arrivées). En encaissant 1px, vous obligez le navigateur à gérer ce 1 pixel, quoi qu'il arrive.

Answer 9

meilleure réponse à ce jour (mai 2012) pour forcer la barre de défilement vertical dans Safari, Opera & Firefox est:

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

Opera était le plus difficile et n'insérer la barre de défilement vertical quelle que soit la hauteur de la page si les deux balises html ci-dessus ont été utilisées.

Merci - Dianne

Answer 10

Tout en notant que normalize.css recommandé:

html { overflow-y: scroll; } 

qui est légèrement différente de la réponse d'Alec, mais a depuis laissé tomber. Par HTML5 Boilerplate:

Le style suivant ne figure plus par défaut en raison de problèmes qui peuvent survenir dans Firefox lorsqu'il est combiné avec des plugins JS (comme modaux ou IU glisser-déposer) qui reposent sur des calculs de dimension viewport .

Et en effet, mon expérience est que ça gâche certains plugins jQuery. Je ne sais pas pourquoi les différentes solutions min-height/margin-bottom/padding-bottom ne sont pas préférées, mais elles créent une barre de défilement active (quoique avec un mouvement de 1px) alors que overflow-y crée un handicapé barre de défilement, ce qui est plus agréable.

Answer 11

Ajouter un dépassement: auto in css pour le tag html.

Answer 12

bien voir mon code, datatable se trouve dans 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>