HTML setting table height to 100%_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-13 03:54 出处：网络

I’ve tried doing this, but it seems to just be ignored.I found a few articles saying that if you wanted to do this then you had to make sure that the parent object was also 100%.I have the following:

I’ve tried doing this, but it seems to just be ignored. I found a few articles saying that if you wanted to do this then you had to make sure that the parent object was also 100%. I have the following:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server" style="height:100%">
    <title>Untitled Page</titl开发者_运维百科e>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
      .MasterStyle
      {
          width: 98%;            
          height: 100%;
      }
      .ContentStyle
      {         
          width: 100%;
      }
      .TableStyle
      {
          width: 133px;                     
          height: 100%;
      }
    </style>
 </head>
 <body class="MasterStyle">
    <form id="frmMaster" runat="server">
     <div class="ContentStyle">        
      <asp:Label runat="server" Text="My Site Name" Font-Bold="true" Font-Names="MS-Sans" 
            Style="text-align:right" Width="100%" />
      <br />        
    </div>
    <hr />
    <table style="width:100%; height:100%" border="true">
      <tr>
        <td class="TableStyle" style="height:100%">

I have a border around the table and can see that it’s not filling the height. Can anyone tell me why I’m not getting 100% height?

I believe this is also browser dependant, the implementations vary a little bit...
But try setting <html> to a height of 100 % as well, since it is the element surrounding <body>. The hierarchy is html > body > table, if the outermost element is not set to 100%, the inner ones can not get any bigger.

Edit:
Looking closer at your source code, I believe that your table is actually sitting at html > body > form > table, so maybe you nee to set the form height to 100 %, too. And I noticed that your <head> is set to 100 %, better remove that, since <head> is not part of the hierarchy of your table. You never how setting a height for <head> might confuse a rendering engine...