Radgrid填充容器高度

我有一些嵌套的div，其中一個包含需要填充其容器的Radgrid控件。Radgrid填充容器高度

嘗試100％身高/寬度。沒有工作。
嘗試絕對定位。沒有工作。
根據Telerik的建議here。不。按照post。嗯，嗯。我嘗試聯繫Telerik支持。他們的解決方案讓我改變了網格上方的div的大小，但這不是問題（這些div已經正確調整大小）。我發現的所有其他解決方案都是上述之一的變體，但是這些解決方案都沒有讓我到那裏。我將問題分解成一個示例母版頁（客戶頁面爲空）。下面的代碼和css：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="GridTest.master.cs" Inherits="GridTest" %> 

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Grid Test</title> 
    <link href="main-styles.css" rel="stylesheet" type="text/css" /> 
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
</head> 
<body> 
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> 
     <script type="text/javascript"> 
      function gridCreated(sender, eventArgs) { 
       var scrollArea = sender.GridDataDiv; 
       var parentHeight = $('#inner-content').height(); 
       var gridHeader = sender.GridHeaderDiv; 
       scrollArea.style.height = parentHeight - gridHeader.clientHeight + "px"; 
      } 
     </script> 
    </telerik:RadCodeBlock> 
    <form id="form1" runat="server"> 
    <asp:ScriptManager ID="ScriptManager1" runat="server"> 
    </asp:ScriptManager> 
    <div id="banner"> 
    </div> 
    <div id="wrapper1"> 
     <div id="wrapper2"> 
      <div id="sidepanel"> 
       Action</div> 
      <div id="content-box"> 
       <div id="panel-header"> 
        Panel header</div> 
       <div id="inner-content"> 
        <telerik:RadGrid ID="TestGrid" runat="server"> 
         <ClientSettings> 
          <Scrolling AllowScroll="True" UseStaticHeaders="true" /> 
          <ClientEvents OnGridCreated="gridCreated" /> 
         </ClientSettings> 
        </telerik:RadGrid> 
       </div> 
       <!-- inner-content --> 
      </div> 
      <!-- content-box --> 
     </div> 
     <!-- wrapper2 --> 
    </div> 
    <!-- wrapper1 --> 
    </form> 
</body> 
</html>

而CSS：

ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input 
{ margin:0; padding:0 } 
h1, h2, h3, h4, h5, h6, pre, code { font-size:100%; } 
html, body { width: 100%; height: 100%; overflow: hidden; } 

body { 
     font-family: Verdana, Arial, sans-serif; 
     line-height: 140%; 
     color: #fff; 
     background: #301849; 
    } 

p { 
    font-size: 1em; 
    padding-bottom: 1em; 
    padding-top: 0.8em; 
} 
#banner 
{ 
    background-color: Blue; 
    position: fixed; 
    width: 100%; 
    height: 100px; 
} 
#wrapper1 { 
    position: relative; 
    top: 110px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 
#wrapper2 { 
    position: absolute; 
    height: 100%; 
    top: 0px; 
    right: 0px; 
    bottom: 110px; 
    left: 0px; 
    overflow: hidden; 
    background-color: Black; 
} 

#sidepanel 
{ 
    background-color: Orange; 
    position: absolute; 
    width: 300px; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    overflow: auto;  
} 
#content-box { 
    position: absolute; 
    height: 100%; 
    width: auto; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    left: 310px; 
    background-color: Gray; 
} 
#panel-header 
{ 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    left: 0px; 
    height: 50px; 
    background-color: Green; 
} 
#inner-content 
{ 
    position: absolute; 
    background-color: Olive; 
    top: 50px; 
    right: 0px; 
    bottom: 0px; 
    left: 0px; 
}  
#TestGrid 
{ 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    left: 0px; 
}

來源

2011-10-09 Sean Rich

試試這個：

#inner-content 
{ 
    position: relative; 
    background-color: Olive; 
    top: 50px; 
    right: 0px; 
    bottom: 0px; 
    with: 100%; 
    height: 100%; 
    left: 0px; 
}

而且這樣的：

<telerik:RadGrid Width="100%" Height="100%" ID="TestGrid" runat="server">

來源

2011-10-09 18:06:56 Icarus

謝謝，伊卡洛斯。我嘗試了你的建議，並且當我查詢div時，他們看起來大小正確，但行爲完全錯誤。 Telerik生成的標題和數據div高度正確地加在整個網格div以及＃inner-content（它的容器）的高度上，然而在視覺上它好像網格延伸到它的容器下面。當我調整瀏覽器窗口的大小並且數據不再可見時，溢出滾動條應該是可見的，但是直到網格的一半以上被隱藏起來纔會出現。我錯過了一些內部滾動器屬性？ –

@SeanRich我不是CSS方面的專家，但我告訴我你的問題與你在容器div上的'position：absolute'有關。絕對定位主要用於浮動div和z-index。我會嘗試設置所有位置：相對或甚至刪除所有'position'指令並使用'padding'或'margin'。例如，而不是'position：absolute; top：50px;''你可以刪除'position'並且只需要'margin-top：50px;' – Icarus

我已經對標記和javascript做了一些mod，並且得到了一些工作，儘管我很失望我不得不度過到JavaScript來讓Telerik的控件正確佈局。再次感謝。 –

我有這個問題以及。 rad網格總是以300px渲染 - 以內聯風格，甚至不是css類。我提出的解決方案比telerik提供的或在網上找到的任何東西都容易。只需添加到您的網頁的風格標籤，你就大功告成了（可能必須從類更改爲電網的實際ID，但你得到的要點）：

div.rgDataDiv 
{ 
    height:auto!important; 
}

田田！

來源

2015-09-23 13:42:26 Sergiu

這不適用於OP正在使用的靜態標頭。 – fix

我剛剛遇到了這個問題，並認爲我會分享我的JavaScript/jQuery解決方案。我看到你正在使用靜態頭文件，對於我來說，在調整網格大小後打破了水平滾動。此解決方案不會使用UseStaticHeaders = true中斷水平滾動，並且將網格的大小設置爲比窗口高度小250px。

var mainGrid; 
function GridCreated(sender, args){ 
    mainGrid = sender.GridDataDiv; 
    mainGrid.style.height = $(window).height() - 250; 
} 
$(window).resize(function() { 
    if (mainGrid != null && $(window).height() > 250) { 
     mainGrid.style.height = $(window).height() - 250; 
    } 
)};

來源

2016-08-04 17:54:16 fix

Radgrid填充容器高度

回答

相關問題