Make <object> tag fill the whole window and resize with it

18,124
.internal {
    width: 100%;
    height: 100%;
}

.container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
 }
Share:
18,124

Related videos on Youtube

whywhat
Author by

whywhat

software developer

Updated on September 19, 2022

Comments

  • whywhat
    whywhat over 1 year

    I have a NaCl plugin for Chrome that I'd like to fill the whole window with. HTML is like this:

    <!DOCTYPE html>
    <html>
      <head></head>
      <body>
        <div class="container,box">
          <object class="internal,box"></object>
        </div>
      </body>
    </html>
    

    I tried a couple of styles:

    1.     html {
            height: 100%;
          }
          .box {
            position:absolute;
            left/right/top/bottom: 0;
            display:block;
            padding: 5px
          }

      fills the whole window, remains with the default size, 300x150.

    2.     html, body, .box { padding: 0; border: 0; margin: 0; width: 100%; height: 100% }
          .container { padding: 5px; } 

      fills the whole window but it width/height is unaffected by padding so it overflows the containing

    Did anyone face similar problem? Any CSS solutions? I need it to work only in Chrome.