CODEWITHSUNDEEP
htmlcsswebkit
Jakub Zaverka
Jakub Zaverka

Reputation: 8874

Webkit browser doesn't fill up div

My code:

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

In Firefox, it displays fine, the table filling up the entire div, having the table contents vertially centered.

If I display it on Webkit-based browser, the table doesn't fill the entire div, causing the label to be vertically aligned to the top. How do I make the table expand to the whole div on Webkit-based browser?

More specifically, I am interested in Android browser.

Upvotes: 0

Views: 219

Answers (2)

Elliot B.
Elliot B.

Reputation: 17661

For your situation, I would normally use position:absolute;height:100%; for the inner element. But that didn't work for a table, so I used display:block to make it display like a regular DIV. Seems to work well.

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

Upvotes: 2

WooCaSh
WooCaSh

Reputation: 5212

By setting td height you can get this:

http://jsfiddle.net/d7kfR/

Is it what you need?

Upvotes: 1

Related Questions