栅格填充容器高度

本文关键字：高度 填充 | 更新日期: 2023-09-27 18:10:43

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

已尝试100%的高度/宽度。没有工作。
试过绝对定位。没有工作。
听从了Telerik的建议。不是的。
跟随这篇文章。嗯。我试着联系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;
}

栅格填充容器高度

我也遇到过这个问题。rad网格总是以300px的格式呈现——采用内联样式，甚至不使用css类。我提出的解决方案比telerik建议的或在网上找到的任何解决方案都要简单。只需将其添加到页面的样式标签中，您就完成了(可能必须从类更改为网格的实际id，但您了解要点):

div.rgDataDiv
{
    height:auto!important;
}

大作。

试试这个:

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

我刚刚遇到这个问题，并认为我将分享我的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;
    }
)};
相关文章：