Question

我知道很多次问过与此相似的问题，我在答案后尝试了答案无济于事。我正在尝试格式化HTML页面，我试图使用表格来定位所有内容。

所以我使用表创建了一个3x3网格，并用我想要包含的信息填充它。我遇到的问题是空单元格不占用空间，这意味着具有空单元格的行或列格式不正确。

有没有办法强制我的行填充窗口的整个高度？我想让所有9个'细胞'大小相等。谢谢！

以下是格式化的一次尝试。我在单元格周围加了边框，使它们更加醒目，并删除了存储在我电脑上的图像：

<!doctype HTML>
<html>
<head>
    <link href='https://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
    <style>
        html {height: 100%; width: 100%;}
        body {background-color: black; min-width: 100%; min-height: 100%;font-family: 'Audiowide', Lucida Console, Lucida, sans-serif;}
        table {table-layout: fixed; width: 100%; min-height: 100%; border: 1px solid white;}
        #outer {width: 100%; height: 100%;}
        #img {float: left}
        .container {width=33%; height=33%; border-radius: 3px; background-color: #afafaf;}
        #inner {}
        .text {color: black; font-size: 16px;}
        #sub {margin-left:45%; width: 10%; text-align: center; color: black}
        #nAcc {margin:auto; text-align: center; color: black}
        td, tr {border: 1px solid white;}
        .spacing {height=100% width=100%;};
        a {text-decoration: none;}

    </style>

    <title>Ethan's Messenger</title>
</head>
<body>
    <div class="spacing">
    <table id="outer">
        <tr>
            <td id="img"><img src="" id="logo" /></td>
            <td>&nbsp</td>
            <td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td>
            <td>
                <div class="container">
                    <form><table id="inner">
                        <tr>
                            <td class="text">Username:</td>
                            <td><input type="text" style="width:100%"></element></td>
                        </tr>
                        <tr>
                            <td class="text">Password:</td>
                            <td><input type="text" style="width:100%"></element></td>
                        </tr>
                        <tr><td colspan="2"><input type="submit" id="sub"></element></td></tr>
                        <tr><td colspan="2"><a href="/nAcc/"><p id="nAcc">Create A New Account</p></a></td></tr>
                    </table></form>
                </div>
            </td>
        <td>&nbsp</td>
    </tr>
    <tr>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
    </tr>
</table>
</div>
</body>
</html>

html {
  height: 100%;
  width: 100%;
}
body {
  background-color: black;
  min-width: 100%;
  min-height: 100%;
  font-family: 'Audiowide', Lucida Console, Lucida, sans-serif;
}
table {
  table-layout: fixed;
  width: 100%;
  min-height: 100%;
  border: 1px solid white;
}
#outer {
  width: 100%;
  height: 100%;
}
#img {
  float: left
}
.container {
  width=33%;
  height=33%;
  border-radius: 3px;
  background-color: #afafaf;
}
#inner {} .text {
  color: black;
  font-size: 16px;
}
#sub {
  margin-left: 45%;
  width: 10%;
  text-align: center;
  color: black
}
#nAcc {
  margin: auto;
  text-align: center;
  color: black
}
td,
tr {
  border: 1px solid white;
}
.spacing {
  height=100% width=100%;
}
;
 a {
  text-decoration: none;
}

<link href='https://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>



<div class="spacing">
  <table id="outer">
    <tr>
      <td id="img">
        <img src="" id="logo" />
      </td>
      <td>&nbsp</td>
      <td>&nbsp</td>
    </tr>
    <tr>
      <td>&nbsp</td>
      <td>
        <div class="container">
          <form>
            <table id="inner">
              <tr>
                <td class="text">Username:</td>
                <td>
                  <input type="text" style="width:100%">
                  </element>
                </td>
              </tr>
              <tr>
                <td class="text">Password:</td>
                <td>
                  <input type="text" style="width:100%">
                  </element>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <input type="submit" id="sub">
                  </element>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <a href="/nAcc/">
                    <p id="nAcc">Create A New Account</p>
                  </a>
                </td>
              </tr>
            </table>
          </form>
        </div>
      </td>
      <td>&nbsp</td>
    </tr>
    <tr>
      <td>&nbsp</td>
      <td>&nbsp</td>
      <td>&nbsp</td>
    </tr>
  </table>
</div>

Answer 1

我不确定这是否是您正在寻找的预期结果，但是如果您将height的{{1}}更改为table而不是100vh它将填满整个视图。

Answer 2

这看起来不像有效的CSS ......

.spacing {height=100% width=100%;};

应该是

 .spacing {height:100%; width:100%;}

与一些内联样式相同......

style="width:100%"

应该是

style="width:100%;"

强制HTML表格行填充屏幕

2 个答案: