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

вертикальная полоса не отображается в IE8, если страница недостаточно длинная. В FF есть обходной путь для этого

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

я попробовал следующее для IE8:overflow:scroll; но полоса прокрутки появляется с обеих сторон. Я хочу, чтобы он был только вертикальным, а не горизонтальным. scroll-y не работает.

любое решение?

11
css internet-explorer-8 scrollbar

12 ответов

О, понял. Его

body {
   overflow-y: scroll;
}
19

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

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

попробовать

-ms-overflow-y : scroll;

7

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

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

например :

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

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

3

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

2

лучший ответ на сегодняшний день (май 2012) для принуждения вертикальной полосы прокрутки в safari, opera & firefox:

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

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

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

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

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

1

просто отмечая, что нормализуется.css рекомендуется:

html { overflow-y: scroll; }

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

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

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

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

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

примечание: Я хотел заставить полосу прокрутки на страницах, которые я знаю, не нужно будет прокручивать. Это решение для такой ситуации.

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

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

0

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

0

Ну см. мой код, 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>
0