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

html css google-chrome google-nativeclient
whywhat picture whywhat · Oct 24, 2012 · Viewed 17.3k times · Source

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.

Answer

sphair picture sphair · Oct 24, 2012 
.internal {
    width: 100%;
    height: 100%;
}

.container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
 }

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)

I have this problem. Chrome continues to return this error Resource interpreted as stylesheet but transferred with MIME type text/html The files affected by this error are just the Style, chosen and jquery-gentleselect (other CSS files that are imported …

Read More
Firebug-like debugger for Google Chrome

Is there anything like Firebug that you can use within Google Chrome? Essential features I would like: Inspect HTML source (select elements, delete them, etc.) check CSS values (the built-in solution is weird, somehow)

Read More