title: Div to be fixed at the top of the window
body: <p>Guys I want to fix a div width and height as 100%. But the problem is that div is inside a  wrapper with a fixed width.</p>
  
  <p>I have a button above the div which onclick="" makes the div to change its class with full width and height. i want to position that div to the top-left corner of the window.My code is</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Javascript Change CSS Class of Div tag&lt;/title&gt;
  
      &lt;style type="text/css"&gt;
  
      #wrapper
      {
          width:75%;
          height:75%;
          margin:0 auto;
      }
      .minimize {
          color : red;
          width:500px;
          height:200px;
          background:#474747;
          float:left;
       } 
  
       .maximize {
          color : blue;
          width:100%;
          height:100%;
          float:left;
          background:#ccc;
       }
  
      &lt;/style&gt;
  
      &lt;script language="javascript" type="text/javascript"&gt;
  
          function changeCssClass(navlink)
          {
              if(document.getElementById(navlink).className=='minimize')
              {
                  document.getElementById(navlink).className = 'maximize';
              }
              else
              {
                  document.getElementById(navlink).className = 'minimize';
              }
          }
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;   &lt;div id="wrapper"&gt;
          &lt;div  id="navlink" class="minimize"&gt;&lt;input type="button" value="click here" onclick="changeCssClass('navlink')" /&gt; &lt;/div&gt;
          &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But i want to make it to look like this with wrapper</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Javascript Change CSS Class of Div tag&lt;/title&gt;
  
      &lt;style type="text/css"&gt;
  
  
      .minimize {
          color : red;
          width:500px;
          height:200px;
          background:#474747;
          float:left;
       } 
  
       .maximize {
          color : blue;
          width:100%;
          height:100%;
          float:left;
          background:#ccc;
       }
  
  
  
  &lt;/style&gt;
  
      &lt;script language="javascript" type="text/javascript"&gt;
  
          function changeCssClass(navlink)
          {
              if(document.getElementById(navlink).className=='minimize')
              {
                  document.getElementById(navlink).className = 'maximize';
              }
              else
              {
                  document.getElementById(navlink).className = 'minimize';
              }
          }
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;   
          &lt;div  id="navlink" class="minimize"&gt;&lt;input type="button" value="click here" onclick="changeCssClass('navlink')" /&gt; &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Will any one help here....</p>
  
  <p>If anyone has any suggestion??</p>