Принудительно отображать вертикальную полосу прокрутки в IE8

О, понял. Его

body {
   overflow-y: scroll;
}

Я использую следующее:

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

Пытаться

-ms-overflow-y : scroll;

поместите его в свой div, т.е.

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

Например :

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

Другим решением является установка высоты тела на 100% — см. пример до/после на http://www.iecustomizer.com/msmvp/HTMLHeightTest.htm

html, тело { высота: 100,1%; }

Лучший ответ на сегодняшний день (май 2012 г.) для принудительной вертикальной полосы прокрутки в сафари, опере и Firefox:

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

Opera была самой сложной и вставляла вертикальную полосу прокрутки независимо от высоты страницы, только если использовались оба HTML-тега выше.

Спасибо - Диана

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

Делает вашу страницу всегда на 1 пиксель длиннее, поэтому полосы прокрутки всегда появляются, и добавляет прокрутку на 1 пиксель только к страницам, которые недостаточно длинны, чтобы зритель не думал, что он что-то упускает, и прокручивает вниз без причины. Простой и работает во всех основных браузерах (которые я тестировал)

Просто отметив, что normalize.css рекомендует:

html { overflow-y: scroll; }

который немного отличается от ответа Алека, но с тех пор от него отказался. Согласно HTML5 Boilerplate:

Следующий стиль больше не включается по умолчанию из-за проблем, которые могут возникнуть в Firefox при сочетании с плагинами JS (такими как модальные окна или пользовательские интерфейсы с перетаскиванием), которые полагаются на расчеты размеров области просмотра.

И действительно, по моему опыту, это портит некоторые плагины jQuery.

Я не уверен, почему различные решения min-height/margin-bottom/padding-bottom не являются предпочтительными, но они создают активную полосу прокрутки (хотя и с перемещением на 1 пиксель), тогда как overflow-y создает отключенную полосу прокрутки, которая лучше.

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

ПРИМЕЧАНИЕ. Я хотел принудительно использовать полосу прокрутки на страницах, которые, как я ЗНАЮ, не нужно будет прокручивать. Это решение для такой ситуации.

Решение Джонси не сработало для меня во всех браузерах, но я хочу иметь незначительную серую полосу шириной 1 пиксель, которая стабильно работает во всех браузерах. Для меня это лучше, чем показывать полный дополнительный 1% (решение чипа). С точки зрения дизайна это даже не уступка, потому что она настолько незначительна — попробуйте и поймете, что я имею в виду.

Кроме того, это решение будет очень перспективным. Если вы хотите добавить пустое пространство, как и другие решения, неизвестно, какие оптимизации будут встроены в будущие браузеры, и я могу представить, что какой-нибудь браузер обнаруживает пустое пустое пространство и устраняет его (случались и более странные вещи). Уступая 1 пиксель, вы заставляете браузер работать с этим 1 пикселем, несмотря ни на что.

Добавьте overflow:auto в css для тега html.

Хорошо, посмотрите мой код, таблица данных находится внутри 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>