Question

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

我想摆脱那个垂直滚动条

＆＃13;

@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%
}

＆＃13;

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

＆＃13;

Answer 1

好像我找到了一个解决方案：

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

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

以下是codepen：http://codepen.io/anon/pen/dNzONe

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

注意：我实际上并没有看到最顶部的边框，但是我的版本中没有看到一个边框...

超出100％垂直高度与边界表

1 个答案: