Dynamic Div Resizing with overflow_问答_开发者

开发者 https://www.devze.com 2023-02-12 12:32 出处：网络

I have some Div tags with grids inside. If I set them to a set height they all work perfectly and scrolls bars pop up when the grids row count increase, but no resizing on window maximize.

相关专题：css javascript

I have some Div tags with grids inside.

If I set them to a set height they all work perfectly and scrolls bars pop up when the grids row count increase, but no resizing on window maximize.

When i set them to a % size of the screen, they all resize perfectly on maximize, but when the grid increases in size NO scroll bars ever pop up and the content grows the div over the entire page.

Is there a way to have div tags sized by % while still maintaining their size when the children expand?

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

Server Code -

  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.ToStri开发者_如何学Pythonng());

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

}

I resolved this by adding an Onresize event handler. Then in that event code recalculating the div sizes based on form sizes from javascript.

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";
}