Bootstrap 3 kullanıyorum, üstte bir navbar ve Bootstrap 3'ün tablo sınıfı kullanılarak biçimlendirilmiş bir tablo görüntüleyen bir sayfa var. Tablonun (kendi div'inde duran) sayfanın kaydırılabilir tek parçası olmasını istiyorum (tablodaki verilerin genişliği/yüksekliği sayfanınkini aştığında). Tablo için div'i aşağıdaki gibi şekillendirdim:
.mygrid-wrapper-div {
overflow: scroll;
height: 200px;
}
Bunu gösteren bir kemanım var ve kaydırılabilir olmasını istediğim alanı vurgulamak için div'in etrafına çirkin bir 5px kırmızı kenarlık ekledim:
[
][1]Soldan sağa kaydırmanın harika çalıştığına dikkat edin - bunun çalışması için hiçbir şey yapmam gerekmedi ve div, pencere yeniden boyutlandırıldığında da kaydırma çubuğunu otomatik olarak ayarlıyor. Ancak, div'in yüksekliğini aynı şekilde davranacak şekilde nasıl ayarlayacağımı bilmiyorum - 200px değerini sabit kodladım ama aslında div'in pencerenin "geri kalanını" doldurmasını istiyorum, böylece tarayıcı yeniden boyutlandırıldığında hala çalışıyor.
Div'in hem yatay hem de dikey olarak aynı şekilde davranmasını nasıl sağlayabilirim?
Kaydırma, pre-scrollable
sınıfına sahip bir kutudan gelir
<div class="pre-scrollable"></div>
Daha fazla örnek var: http://getbootstrap.com/css/#code-block
Yardımcı olması dileğiyle.
Bunu yapmanın bir yolu, gövdenizin yüksekliğini sayfanızın
olmasını istediğiniz yüksekliğe
ayarlamaktır. Bu örnekte ben 600px
yaptım.
Ardından wrapper
yüksekliğinizi gövdenin bir yüzdesine ayarlayın burada 70%
yaptım Bu, tablonuzu tüm ekranı doldurmayacak, bunun yerine yalnızca belirtilen sayfa yüksekliğinin bir yüzdesini kaplayacak şekilde ayarlayacaktır.
body {
padding-top: 70px;
border:1px solid black;
height:600px;
}
.mygrid-wrapper-div {
border: solid red 5px;
overflow: scroll;
height: 70%;
}
Güncelleme JQuery yaklaşımına ne dersiniz?
$(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/