Bootstrap 3 div derulabil pentru tabel (Programare, Javascript, Jquery, Css, Twitter Bootstrap)

David McClelland a intrebat.

Folosesc Bootstrap 3 cu o bară de navigare în partea de sus și o pagină care afișează un tabel formatat folosind clasa table din Bootstrap 3. Aș dori ca tabelul (care este așezat în propriul div) să fie singura parte a paginii care poate fi derulată (atunci când lățimea/înălțimea datelor din tabel o depășește pe cea a paginii). Am stilizat div-ul pentru tabel după cum urmează:

.mygrid-wrapper-div {
    overflow: scroll;
    height: 200px;
}

Am o vioară care ilustrează acest lucru și am adăugat o margine roșie urâtă de 5px în jurul div-ului pentru a evidenția zona pe care aș dori să o am derulabilă:

http://jsfiddle.net/4NB2N/4/

Observați că derularea de la stânga la dreapta funcționează foarte bine – nu a trebuit să fac nimic pentru ca acest lucru să funcționeze, iar div-ul ajustează automat bara de defilare și atunci când fereastra este redimensionată. Cu toate acestea, nu știu cum să configurez înălțimea div-ului pentru a se comporta în același mod – am codat în mod greșit valoarea de 200px, dar în realitate aș vrea ca div-ul să umple „restul” ferestrei, astfel încât atunci când browserul este redimensionat să funcționeze în continuare.

Cum pot face ca div-ul să se comporte la fel atât pe orizontală, cât și pe verticală?

Comentarii

  • ați încercat cu o înălțime maximă? –  > Por dbrin.
3 răspunsuri
itsnikolay

O defilare vine de la o cutie cu clasa pre-scrollable

<div class="pre-scrollable"></div>

Există mai multe exemple: http://getbootstrap.com/css/#code-block
Doresc să vă ajute.

Comentarii

  • Acest lucru funcționează pentru mine, de exemplu: <div class=”well well-sm pre-scrollable”> <samp id=”containerLog” class=””></samp> </div> </div> –  > Por gihanchanuka.
  • asta e super și cea mai bună soluție cu această clasă chiar și în elementele cu partea de sus sau de jos fixă! –  > Por loretoparisi.
Trevor

Ei bine, o modalitate de a face acest lucru este să setați înălțimea corpului dvs. height pe care doriți să o aveți page să fie. În acest exemplu am făcut 600px.

Apoi setați-vă wrapper înălțimea la un procent din corp, aici am făcut 70% Acest lucru va ajusta tabelul astfel încât să nu umple întregul ecran, ci să ocupe doar un procent din înălțimea paginii specificate.

body {
   padding-top: 70px;
   border:1px solid black;
   height:600px;
}

.mygrid-wrapper-div {
   border: solid red 5px;
   overflow: scroll;
   height: 70%;
}

http://jsfiddle.net/4NB2N/7/

Actualizare Ce zici de o abordare jQuery.

$(function() {  
   var window_height = $(window).height(),
   content_height = window_height - 200;
   $('.mygrid-wrapper-div').height(content_height);
});

$( window ).resize(function() {
   var window_height = $(window).height(),
   content_height = window_height - 200;
   $('.mygrid-wrapper-div').height(content_height);
});

http://jsfiddle.net/4NB2N/11/

Comentarii

  • Dar eu nu știu înălțimea corpului/paginii, utilizatorul poate redimensiona fereastra browserului la orice lățime/înălțime dorește. Eu chiar vreau doar ca <mygrid-wrapper-div> să ocupe „restul” paginii. –  > Por David McClelland.
  • Vă mulțumim pentru ajutor! Cu toate acestea, există vreo modalitate de a face acest lucru fără a cunoaște valoarea de 200px pentru înălțime? Am folosit această valoare ca o valoare codificată pentru a arăta ce încerc să obțin, dar aș dori o soluție mai generalizată pentru a spune că DIV-ul ocupă „restul” zonei de vizualizare a ferestrei? Fereastra își va schimba înălțimea/lățimea pe măsură ce utilizatorul o redimensionează (sau folosește un dispozitiv cu o rezoluție diferită). –  > Por David McClelland.
  • @DavidMcClelland the 200 valoare este necesară doar pentru a ajusta înălțimea învelișului dvs. astfel încât să nu ajungă în partea de jos a paginii. Nu are legătură cu exemplul tău. Dacă ajunge în partea de jos a paginii, defilarea nu mai funcționează așa cum doriți. Ai încercat pe pagina ta? Cred că ar trebui să funcționeze bine pe majoritatea dispozitivelor… Ar putea exista o șansă să nu funcționeze pe dispozitive foarte mici, cum ar fi telefoanele mobile… În acest caz, puteți verifica $(window).width() pentru o lățime mică și să o ajustați mai sus. Schimbați-o la 250 în loc de 200 etc.. –  > Por Trevor.

Puteți folosi și

style="overflow-y: scroll; height:150px; width: auto;"

Pentru mine funcționează