Saya menggunakan Bootstrap 3 dengan navbar di bagian atas dan halaman yang menampilkan tabel yang diformat menggunakan Bootstrap 3's tabel kelas. Saya ingin tabel (yang duduk di sendiri div) untuk menjadi satu-satunya bagian dari halaman yang digulir (bila lebar/tinggi dari data dalam tabel yang melebihi halaman). Saya telah ditata div untuk tabel sebagai berikut:
.mygrid-wrapper-div {
overflow: scroll;
height: 200px;
}
Saya memiliki sebuah biola yang menggambarkan hal ini, dan saya menambahkan jelek 5px merah perbatasan di sekitar div untuk menyoroti area yang saya ingin memiliki digulir:
[
][1]Perhatikan bahwa menggulir ke kiri-ke-kanan-karya besar - aku't harus melakukan apa saja untuk mendapatkan ini untuk bekerja, dan div menyesuaikan scrollbar secara otomatis ketika jendela ukurannya juga. Namun, saya don't tahu bagaimana untuk setup div's tinggi untuk berperilaku dengan cara yang sama - aku hardcoded yang 200px nilai tapi benar-benar saya ingin div untuk mengisi "rest" jendela sehingga ketika browser ukurannya masih bekerja.
Bagaimana saya dapat membuat div bersikap sama baik secara horizontal maupun secara vertikal?
Bergulir berasal dari sebuah kotak dengan kelas pra-digulir
<div class="pre-scrollable"></div>
Ada's contoh: http://getbootstrap.com/css/#code-block
Berharap itu membantu.
Nah salah satu cara untuk melakukannya adalah mengatur tinggi dari tubuh anda untuk tinggi
yang ingin anda halaman
yang akan. Dalam contoh ini saya melakukan 600px
.
Kemudian mengatur wrapper
tinggi untuk persentase dari tubuh berikut yang saya lakukan 70%
Ini akan mengatur meja anda sehingga tidak mengisi seluruh layar tapi dalam manfaat hanya mengambil persentase dari halaman tertentu tinggi.
body {
padding-top: 70px;
border:1px solid black;
height:600px;
}
.mygrid-wrapper-div {
border: solid red 5px;
overflow: scroll;
height: 70%;
}
Update Bagaimana tentang jQuery pendekatan.
$(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/