Question

我的代码：

<html>
  <head></head>
  <body>
    <div style="position: relative; border:1px black solid; background-color:#00a2e8; min-width: 100px; min-height: 100px; width: 1px; height: 1px">
      <table border="1" style="width:100%; height: 100%;">
        <tr><td style="vertical-align: middle">abc</td></tr>
      </table>
    </div>
  </body>
</html>

在Firefox中，它显示正常，表格填满整个div，表格内容垂直居中。

如果我在基于Webkit的浏览器上显示它，表格不会填满整个div，导致标签垂直对齐到顶部。如何在基于Webkit的浏览器上将表扩展为整个div？

更具体地说，我对Android浏览器感兴趣。

Answer 1

根据您的情况，我通常会使用position:absolute;height:100%;作为内部元素。但这并不适用于桌子，因此我使用display:block使其显示为常规DIV。似乎运作良好。

Working example

<html>
  <head></head>
  <body>
    <div style="border:1px black solid; background-color:#00a2e8; min-width:100px; min-height:100px;height:100px;width:100px;">
      <table style="display:block;border:1px solid red;height:100%;">
          <tr><td style="vertical-align: center;">abc sdfs dfs df sdf sd fsd fsd fsdf sds dfs df </td></tr>

      </table>
    </div>
  </body>
</html>

Answer 2

通过设置td 高度，您可以获得：

http://jsfiddle.net/d7kfR/

这是您需要的吗？

Webkit浏览器不会填满div

2 个答案: