HTML 将表格高度设置为 100%

发布于 2024-09-15 04:24:39 字数 1201 浏览 4 评论 0原文

我尝试过这样做,但它似乎被忽略了。我发现有几篇文章说,如果你想这样做,那么你必须确保父对象也是 100%。我有以下内容:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server" style="height:100%">
    <title>Untitled Page</title>
    <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%">    

我在桌子周围有一个边框,可以看到它没有填满高度。谁能告诉我为什么我的身高没有达到100%?

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</title>
    <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?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

救星 2024-09-22 04:25:23

我相信这也依赖于浏览器,实现略有不同......
但也请尝试将 设置为 100% 的高度,因为它是 周围的元素。层次结构是 html > 正文> table,如果最外面的元素没有设置为100%,里面的元素就不能变大。

编辑:
仔细查看您的源代码,我相信您的表格实际上位于 html > 正文> 表单> table,所以也许您还需要将表单高度设置为 100%。我注意到您的 设置为 100 %,最好将其删除,因为 不是表层次结构的一部分。您永远不会为 设置高度可能会混淆渲染引擎......

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文