Wymuś wyświetlanie pionowego paska przewijania w IE8

Och, rozumiem. Jego

body {

 overflow-y: scroll;

}

Używam następujących:

html {

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

}

Spróbuj

-ms-overflow-y : scroll;

umieść to w swoim div, tj.

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

np .:

<div class="left" style="overflow: -moz-scrollbars-vertical; overflow-y: scroll;

 width: 230px; height: 500px;" >

Innym rozwiązaniem jest ustawienie wysokości ciała na 100% - zobacz przykład „przed/po” pod adresem

http://www.iecustomizer.com/ms ... t.htm
http://www.iecustomizer.com/ms ... t.htm

html, body
{
wysokość: 100,1%;
}

Najlepsza jak dotąd odpowiedź (maj 2012) na wymuszony pionowy pasek przewijania w safari, operze i firefox to:

html {

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

}

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

Opera była najbardziej złożona i wstawiałaby tylko pionowy pasek przewijania, niezależnie od wysokości strony, gdyby zostały użyte oba powyższe tagi HTML.
Dziękuję - Diana

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

Sprawia, że ​​strona jest zawsze o 1 piksel dłuższa, tak aby paski przewijania zawsze się pojawiały, i dodaje tylko 1 piksel przewijania do stron, które nie są wystarczająco długie, aby widz nie sądził, że czegoś brakuje, i przewijają w dół bez powodu. Prosty i działa we wszystkich głównych przeglądarkach strumieniowych (które testowałem)

Wystarczy zauważyć, że zalecany jest normalize.css:

html { overflow-y: scroll; }

to trochę różni się od odpowiedzi Aleca, ale od tego czasu ją wyrzuciła. Według

Szablon
http://html5boilerplate.com/ht ... /css/
HTML5 :

Następujący styl nie jest już domyślnie włączony z powodu problemów
może to wystąpić w przeglądarce Firefox w połączeniu z wtyczkami JS (takimi jak modals
lub przeciągnij i upuść interfejsy użytkownika), które opierają się na obliczeniach rozmiaru widocznego obszaru.

Rzeczywiście, z mojego doświadczenia wynika, że ​​miesza się z niektórymi wtyczkami jQuery.
Nie jestem pewien, dlaczego różne rozwiązania min-height/margin-bottom/padding-bottom nie są preferowane, ale tworzą aktywny pasek przewijania (aczkolwiek z ruchem 1px), podczas gdy overflow-y tworzy wyłączony pasek przewijania, który jest lepszy.

html {

 height: 100%;

 border-bottom: 1px #999 solid;

}

UWAGA: Chciałem wymusić użycie paska przewijania na stronach, o których wiem, że nie będą musiały się przewijać. To rozwiązanie jest właśnie na taką sytuację.
Rozwiązanie Jonesy nie działało dla mnie we wszystkich przeglądarkach, ale jestem skłonny mieć niewielki szary pasek o wielkości 1 piksela, który działa konsekwentnie we wszystkich przeglądarkach. Dla mnie jest to lepsze niż pokazanie pełnego 1% dodatkowego (rozwiązanie chipowe). Z punktu widzenia projektowania nie jest to nawet ustępstwo, ponieważ jest tak niewielkie - spróbuj i zobacz, co mam na myśli.
Co więcej, to rozwiązanie będzie bardzo obiecujące. Jeśli chcesz dodać białą przestrzeń, tak jak inne rozwiązania, nikt nie wie, jakie optymalizacje zostaną wbudowane w przyszłe przeglądarki, i mogę sobie wyobrazić, że jakaś przeglądarka wykryje utraconą białą przestrzeń i ją wyeliminuje (zdarzyły się też dziwne rzeczy) ... Otrzymując 1 piksel, zmuszasz przeglądarkę do radzenia sobie z tym 1 pikselem bez względu na wszystko.

Dodaj przepełnienie: auto do css dla tagu html.

Spójrz na mój kod, datatable jest w 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>