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

Ответ 1

О, подумал. Его

body {
   overflow-y: scroll;
}

Ответ 2

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

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

Ответ 3

Try

-ms-overflow-y : scroll;

Ответ 4

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

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

например:

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

Ответ 5

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

Ответ 6

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

Ответ 7

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

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

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

Спасибо - Dianne

Ответ 8

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

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

Ответ 9

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

html { overflow-y: scroll; }

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

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

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

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

Ответ 10

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

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

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

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

Ответ 11

Добавить переполнение: auto в css для тега html.

Ответ 12

Посмотрите мой код, datatable находится внутри 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>