Question

如果页面不够长，则垂直条不会出现在IE8中。在FF中，有一个解决方法

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

我尝试了以下IE8：overflow:scroll;但滚动条出现在两侧。我只想要垂直而不是水平。 scroll-y不起作用。

任何解决方案？

Answer 1

哦，想通了。其

body {
   overflow-y: scroll;
}

Answer 2

我使用以下内容：

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

Answer 3

尝试

-ms-overflow-y : scroll;

Answer 4

把它放在你的div中，即

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

例如：

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

Answer 5

另一个解决方案是将身高设置为100％ - 请参阅http://www.iecustomizer.com/msmvp/HTMLHeightTest.htm上的前/后示例

Answer 6

html，身体 { 身高：100.1％; }

Answer 7

在safari，opera＆amp ;;中强制垂直滚动条的最佳回复日期（2012年5月） firefox是：

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

Opera是最困难的，如果使用上面的两个html标签，无论页面高度如何，都只会插入垂直滚动条。

谢谢 - 黛安娜

Answer 8

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

使您的页面总是长1px，因此滚动条总是会出现，只会向不够长的页面添加1px滚动，因此不会让查看者认为他们丢失了某些内容并无缘无故地向下滚动。简单，适用于所有主流浏览器（我测试过）

Answer 9

注意到normalize.css建议：

html { overflow-y: scroll; }

这与亚力克的回答略有不同，但此后却放弃了。每HTML5 Boilerplate：

由于出现问题，默认情况下不再包含以下样式当与JS插件（如模态）结合使用时，可能会出现在Firefox中或依赖于视口维度计算的拖放UI。

事实上，我的经验是它弄乱了一些jQuery插件。

我不确定为什么各种min-height / margin-bottom / padding-bottom解决方案不是首选，但是它们会创建一个活动的滚动条（尽管运动速度为1px），而overflow-y会创建一个禁用的滚动条，这更好。

Answer 10

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

注意：我想在我知道不需要滚动的页面上强制滚动条。这种解决方案适用于这种情况。

Jonesy的解决方案在所有浏览器中都不适用于我，但我愿意拥有一个无关紧要的1px灰色条纹，它在所有浏览器中都能保持一致。对我来说，这比显示1％的额外费用（芯片的解决方案）更好。设计明智，它几乎不是让步，因为它是如此微不足道 - 尝试它，看看我的意思。

此外，这个解决方案将是超级面向未来的。如果你想像其他解决方案一样添加空白区域，那么无法确定将在未来的浏览器中构建哪些优化，我可以想象一些浏览器检测到浪费的空白并消除它（发生了奇怪的事情）。通过承认1px，无论如何，你都迫使浏览器处理这个1像素。

Answer 11

在hss标签的css中添加overflow：auto。

Answer 12

看到我的代码，数据表在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>

强制垂直滚动条在IE8中显示

12 个答案: