Force vertical scrollbar to display in IE8

Question

The vertical bar does not appear in IE8 if the page is not long enough. In FF, there is a workaround for this

html {
    overflow: -moz-scrollbars-vertical;
         


        

Answer 1

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

Makes your page always 1px longer so the scroll bars always appear and only adds 1px scroll to pages that are not long enough so it doesn't make the viewer think they are missing something and scroll down for no reason. Simple and works in all main stream browsers (that i tested)

Answer 2

Well see my code, the datatable is inside 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>

Answer 3

I use the following:

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

Answer 4

Best reply to date (may 2012) for forcing vertical scrollbar in safari, opera & firefox is:

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

Opera was the most difficult and would only insert the vertical scrollbar no matter the height of the page if both html tags above were used.

Thanks - Dianne

Answer 5

Just noting that normalize.css recommended:

html { overflow-y: scroll; }

which is slightly different from Alec's answer, but has since dropped it. Per HTML5 Boilerplate:

The following style is no longer included by default due to problems that can arise in Firefox when combined with JS plugins (like modals or drag-and-drop UIs) that rely on viewport dimension calculations.

And indeed my experience is that it messes up some jQuery plugins.

I'm not sure why the various min-height / margin-bottom / padding-bottom solutions aren't preferred, but they do create an active scrollbar (albeit with a 1px movement) whereas overflow-y creates a disabled scrollbar, which is nicer.

Answer 6

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

NOTE: I wanted to force the scrollbar on pages that I KNOW will not need to scroll. This solution is for such a situation.

Jonesy's solution didn't work for me in all browsers, but I'm willing to have an insignificant 1px gray stripe which works consistently in all browsers. To me it's better than showing a full 1% extra (chip's solution). Design wise, it's hardly even a concession because it's so insignificant - try it and see what I mean.

Also, this solution is going to be super future-proof. If you want to add blank space like the other solutions, there's no telling what optimizations will get built into future browsers and I could imagine some browser detecting wasted blank space and eliminating it (stranger things have happened). By conceding 1px, you are forcing the browser to deal with this 1 pixel no matter what.