如何使劍道網格填充JQuery UI對話框中頁眉和頁腳之間的100％高度？

我有一個jQuery UI對話框，它必須在打開後動態設置它的高度和寬度。這包含標題div，劍道網格和頁腳div。我想要做的是使劍道網格滾動而不是對話框;該對話框實際上必須是溢出的：由於其他原因隱藏。換句話說，我需要劍道網格（內容）填充頁腳和頁眉之間100％的空間。我正在使用淘汰賽，淘汰賽 - 劍道。如何使劍道網格填充JQuery UI對話框中頁眉和頁腳之間的100％高度？

<div id="popup"> 
    <div id="header"> 
     <p>blah</p> 
     <p>blah</p> 
     <p>blah</p> 
    </div> 
    <div data-bind="kendoGrid: items"> </div> 
    <div id="footer"> 
     <p><a href="#">CLOSE</a></p> 
    </div> 
</div>

的jsfiddle：http://jsfiddle.net/pbkBd/2/

我一直在使用這個例子來設定的內容高度，但沒有嘗試已經能夠得到這與我的情況下工作：http://jsfiddle.net/dimodi/MjKmJ/

來源

2013-11-01 user210757

您可以設置網格內容高度像這樣，

$(".k-grid-content").height('200');

http://jsfiddle.net/jayanthakgjls/pbkBd/4/

可以計算高度，並將其設置在窗口resize事件，

resize: function() { 
    // user has finished resizing the window 
     var height=<calculate Height> 
    $(".k-grid-content").height(height); 
}

來源

2013-11-01 05:01:16

賈揚塔 - 高度必須是動態雖然。對話框高度是動態設置的，因此網格內容高度也必須動態設置。理想情況下，這只是純粹的CSS。 – user210757

是的，但您可以在設置對話框高度的同時調用這個值。 –

我使用下面的風格給力的網格，以填補：

.fillContainerGrid 
{ 
    height: 100%; 
    width: 100%; 
} 
.fillContainerGrid > .k-grid-content { 
    position: absolute; 
    top: 69px; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 
.fillContainerGrid> .k-pager-wrap { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
}

來源

2015-02-26 16:14:00

如何使劍道網格填充JQuery UI對話框中頁眉和頁腳之間的100％高度？

回答

相關問題