WebKit浏览器未填满的div

我的代码：WebKit浏览器未填满的div

<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，它显示优良，表填满整个格，具有vertially为中心的表的内容。

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

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

来源

2012-12-28 Jakub Zaverka

没有'vertical-align：center' - 有'middle'虽然 – sachleen

@sachleen你说得对，我编辑了代码。但是，这不是我遇到的问题。 –

对于您的情况，我通常会使用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>

来源

2012-12-28 23:41:29

这不起作用。在浏览器中，表格会溢出div并跨越整个页面。如果我将表格的大小设置为1px宽度和高度，则表格停止跨越。 –

请注意，具体我对Android浏览器感兴趣。我不确定各种基于webkit的浏览器是否存在差异。 –

http://jsfiddle.net/4fCDc/1/适用于Android –

通过设置td高度你可以得到这样的：

http://jsfiddle.net/d7kfR/

难道你需要什么？

来源

2012-12-28 23:43:47 WooCaSh

我宁愿避免设置绝对尺寸。桌子的宽度和高度最少为100px，但它们可能更多。 –

WebKit浏览器未填满的div

回答

相关问题