超过100%的垂直高度，带边框的表格

在全屏视图中，此代码生成一个垂直滚动条。当表的高度设置为 100% 时，为什么会发生这种情况？我尝试将 box-sizing 属性更改为 border-box，以将1px边框宽度包含在表的100%高度内。将桌子高度更改为99.999%真的是最好的解决方案还是使用overflow:hidden？有没有更好的解决方案来摆脱这个垂直滚动条？这似乎是1px推动一切超过 100% 的高度。

我想摆脱那个垂直滚动条

@import url('https://necolas.github.io/normalize.css/latest/normalize.css');
html, body{height:100%}
table{border-collapse:collapse; width:100%; height:100%}
td, th{border:1px solid #222; padding:10px}
td div{
  display:inline-block; background-color:#222; color:#eee; padding:5px;
  margin:0 2.5%
}

<!doctype html>
<html lang="en-US">
  <body>
    <table>
      <tr><th rowspan="4">UI</th> <td><div>box-sizing</div></td></tr> 
      <tr><td><div>resize</div></td></tr>
      <tr><div><td><div>cursor</div></td></div></tr>
      <tr><td><div>content</div></td></tr>   
      <tr>
        <th rowspan="6">BASIC BOX</th>
        <td><div>display</div> <div>visibility</div></td>
      </tr> 
      <tr><td><div>overflow</div></td></tr>
      <tr><td><div>clip</div></td></tr>
      <tr><td><div>width</div> <div>height</div></td></tr>
      <tr><td><div>margin</div> <div>padding</div></td></tr>
      <tr><td><div>float</div> <div>clear</div></td></tr>  
      <tr>
        <th rowspan="6">BEAUTIFICATION</th>
        <td><div>...</div> <div>...</div></td>
      </tr> 
      <tr><td><div>...</div></td></tr>
      <tr><td><div>...</div></td></tr>
      <tr><td><div>...</div> <div>...</div></td></tr>
      <tr><td><div>...</div> <div>...</div></td></tr>
      <tr><td><div>...</div> <div>...</div></td></tr>
    </table>
  </body>
</html>

似乎我找到了解决方案：

我怀疑问题是由border-collapse引起的 - 当您删除它时，没有滚动条（在 Chrome 中也没有）

所以我实际上将相同的border: 1px solid #222;添加到您分配给td, th table中。无论如何，它们都会崩溃，但滚动条就这样消失了。

这是代码笔： http://codepen.io/anon/pen/dNzONe

（更改视图以使代码面板位于右侧而不是顶部）

注意：我实际上没有在最顶部看到边框，但我在您的版本中也没有看到边框......

相关内容

最新更新

热门标签：