Question

我有一些带有网格的Div标签。

如果我将它们设置为设定的高度，它们都可以正常工作，并且当网格行数增加时会弹出滚动条，但窗口上的大小调整不会最大化。

当我将它们设置为屏幕的％大小时，它们都会在最大化时完美调整大小，但是当网格大小增加时，不会弹出滚动条，内容会在整个页面上增加div。

有没有办法让div标签大小为％，同时在儿童扩展时仍保持其大小？

<form id="form1" runat="server">
<div>
 <div id="DivOne" runat="server" style="height: 200px;
        width: 98%; margin: 10px; margin-top: 20px; float: none; overflow: auto;" >
        <asp:GridView runat="server" ID="GridOne" CellPadding="2" EnableModelValidation="True"
            Height="100%" Style="margin: 10px;" Width="98%" AutoGenerateColumns="True" DataKeyNames="b"  >
            <HeaderStyle Font-Bold="True" ForeColor="White" CssClass="studyHeader" />
            <SelectedRowStyle BackColor="DarkOrange" />
            <Columns>
            </Columns>
        </asp:GridView>
</div>
     <div id="DivTwo" runat="server" style="height: 40%; width: 98%; float: none; overflow: auto;">
        <asp:GridView runat="server" ID="GridTwo" CellPadding="2" EnableModelValidation="True"
            Height="100%" Style="margin: 10px;" Width="98%" AutoGenerateColumns="True" DataKeyNames="b"
            ForeColor="#333333" GridLines="None" >
            <HeaderStyle Font-Bold="True" ForeColor="White" CssClass="studyHeader" />
            <SelectedRowStyle BackColor="DarkOrange" />
            <Columns>
            </Columns>
        </asp:GridView>
</div>
</div>
</form>

服务器代码 -

  class obj
    {
        public string a { get; set; }
        public int b { get; set; }
    }
    protected void Page_Load(object sender, EventArgs e)
{

    var list = new DataTable("test");

    list.Columns.Add("a", typeof(string), string.Empty);
    list.Columns.Add("b", typeof(int), string.Empty);
    for (int i = 0; i < 50; i++)
    {
        obj la = new obj();
        la.a = i.ToString();
        la.b = i;

        list.Rows.Add(la);
     //   list.Rows.Add(i.ToString());

    }
    GridOne.DataSource = list;
    GridOne.DataBind();
    for (int i = 40; i < 90; i++)
    {
        obj la = new obj();
        la.a = i.ToString();
        la.b = i;

        list.Rows.Add(la);
        //   list.Rows.Add(i.ToString());

    }
    GridTwo.DataSource = list;
    GridTwo.DataBind();

}

Answer 1

我通过添加Onresize事件处理程序解决了这个问题。然后在该事件代码中，根据javascript中的表单大小重新计算div大小。

ASPX

<body onload="javascript:loadViews();" >

的java

function loadViews() {

window.onresize = DoResize;
}


function DoResize() {

var DivOne = document.getElementById(DivOne);   
var DivTwo = document.getElementById(DivTwo);   

var Height;
if(document.documentElement.clientHeight) //IE
    Height = document.documentElement.clientHeight;
else if (window.innerHeight) // FireFox // Not tested.
    Height = window.innerHeight;    

DivTwo.style.height = (Height * 0.40) + "px"; // Set to 40% total height
DivOne.style.height = (Height * 0.40) + "px";
}

动态Div通过溢出调整大小

1 个答案: