Question

我有一些嵌套的div，其中一个包含需要填充其容器的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;
}

Answer 1

我也遇到过这个问题。 rad网格总是以300pxs渲染 - 采用内联样式，甚至不是css类。我提出的解决方案比telerik建议的或在网络上找到的任何内容都要容易。只需将其添加到页面的样式标记中即可完成（可能必须从类更改为网格的实际ID，但您可以获得要点）：

div.rgDataDiv
{
    height:auto!important;
}

TADA！

Answer 2

试试这个：

#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">

Answer 3

我刚遇到这个问题，并认为我分享了我的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;
    }
)};

Radgrid填充容器高度

3 个答案: