La barra vertical no aparece en IE8 si la página no es lo suficientemente larga. En FF, hay una solución para esteFuerza la barra de desplazamiento vertical para mostrar en IE8
html {
overflow: -moz-scrollbars-vertical;
}
He intentado lo siguiente para IE8: overflow:scroll; pero la barra de desplazamiento aparece en ambos lados. Lo quiero solo para vertical y no horizontal. scroll-y no funciona.
¿Alguna solución?
Oh lo pensé. Su
body {
overflow-y: scroll;
}
Otra solución es fijar la altura del cuerpo a 100% - ver un antes/después de ejemplo en http://www.iecustomizer.com/msmvp/HTMLHeightTest.htm
I utilizar lo siguiente:
html {
height: 101%; /* setting height to 101% forces scroll bar to display */
}
Gracias chip! – Jason
Trate
-ms-overflow-y : scroll;
ponlo en tu div ie
style="overflow: -moz-scrollbars-vertical; overflow-y: scroll;
por ejemplo:
<div class="left" style="overflow: -moz-scrollbars-vertical; overflow-y: scroll;
width: 230px; height: 500px;" >
html {height: 100%; margin-bottom: 1px;}
hace que su página siempre 1px más tiempo así, aparecen las barras de desplazamiento y sólo añade 1px de desplazamiento para páginas que no son lo suficientemente largo para que no se haga la el espectador piensa que le falta algo y se desplaza hacia abajo sin ningún motivo. Simple y funciona en todos los principales navegadores de flujo (que probé)
html, cuerpo { altura: 100.1%; }
html {
height: 100%;
border-bottom: 1px #999 solid;
}
NOTA: quería obligar a la barra de desplazamiento en las páginas que yo sepa no tenga que desplazarse. Esta solución es para tal situación.
La solución de Jonesy no me funciona en todos los navegadores, pero estoy dispuesto a tener una banda gris 1px insignificante que funciona de manera consistente en todos los navegadores. Para mí, es mejor que mostrar un 1% extra adicional (solución de chip). En cuanto al diseño, apenas es una concesión porque es muy insignificante, pruébalo y mira a qué me refiero.
Además, esta solución va a ser súper preparada para el futuro. Si desea agregar espacios en blanco como las otras soluciones, no se sabe qué optimizaciones se incorporarán a futuros navegadores y podría imaginarse que algún navegador detecte espacio en blanco y lo elimine (cosas más extrañas han sucedido). Al conceder 1px, estás forzando al navegador a lidiar con este 1 píxel sin importar nada.
la mejor respuesta hasta la fecha (mayo de 2012) para forzar la barra de desplazamiento vertical en Safari, Opera & Firefox es:
html {
height: 101%; /* setting height to 101% forces scroll bar to display */
}
html { min-height: 100%; padding-bottom: 1px; }
Opera fue el más difícil y sólo insertar la barra de desplazamiento vertical sin importar la altura de la página si se usaron las dos etiquetas html anteriores.
Gracias - Dianne
Simplemente observando que normalize.css recomendada:
html { overflow-y: scroll; }
que es ligeramente diferente de la respuesta de Alec, pero desde entonces se ha dejado caer. Por HTML5 Boilerplate:
El siguiente estilo ya no se incluye por defecto debido a problemas que pueden surgir en Firefox cuando se combina con complementos JS (como modales o arrastrar y soltar UI) que se basan en cálculos de la dimensión de ventana gráfica .
Y, de hecho, mi experiencia es que estropea algunos plugins jQuery.
No estoy seguro de por qué no se prefieren las diferentes soluciones de altura mínima/fondo de borde/fondo de relleno, pero sí crean una barra de desplazamiento activa (aunque con un movimiento de 1px) mientras que desbordamiento-y crea una deshabilitada barra de desplazamiento, que es más agradable.
Agregar desbordamiento: auto en css para la etiqueta html.
Bueno ver mi código, la tabla de datos está dentro de 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>
hacer este trabajo para todos los navegadores? – Kimble
No; no funciona para Chrome 9.0. – David
Tampoco funciona para IE8 y versiones anteriores según el sitio web de W3School. –