Home/ Questions/Q 8797667
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T23:53:55+00:00

Guys I want to fix a div width and height as 100%. But the

  • 0

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.

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

<html>
<head>
    <title>Javascript Change CSS Class of Div tag</title>

    <style type="text/css">

    #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;
     }

    </style>

    <script language="javascript" type="text/javascript">

        function changeCssClass(navlink)
        {
            if(document.getElementById(navlink).className=='minimize')
            {
                document.getElementById(navlink).className = 'maximize';
            }
            else
            {
                document.getElementById(navlink).className = 'minimize';
            }
        }

    </script>

</head>
<body>   <div id="wrapper">
        <div  id="navlink" class="minimize"><input type="button" value="click here" onclick="changeCssClass('navlink')" /> </div>
        </div>
</body>
</html>

But i want to make it to look like this with wrapper

<html>
<head>
    <title>Javascript Change CSS Class of Div tag</title>

    <style type="text/css">


    .minimize {
        color : red;
        width:500px;
        height:200px;
        background:#474747;
        float:left;
     } 

     .maximize {
        color : blue;
        width:100%;
        height:100%;
        float:left;
        background:#ccc;
     }



</style>

    <script language="javascript" type="text/javascript">

        function changeCssClass(navlink)
        {
            if(document.getElementById(navlink).className=='minimize')
            {
                document.getElementById(navlink).className = 'maximize';
            }
            else
            {
                document.getElementById(navlink).className = 'minimize';
            }
        }

    </script>

</head>
<body>   
        <div  id="navlink" class="minimize"><input type="button" value="click here" onclick="changeCssClass('navlink')" /> </div>
</body>
</html>

Will any one help here….

If anyone has any suggestion??

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think this is what you were after, but it was hard to tell because you didn’t specify exactly what states should be held for .minimize and .maximize.

    Notice that the javascript is substantially different than your original.

    Since ‘class’ is an attribute on DOM elements, it should be accessed using getAttribute and setAttribute. There was a very, very old bug in IE6 that would only let javascript access an element’s classes via className, but that is no longer the case.

    Additionally, take notice of how I’m handling the class attribute. Since you can specify multiple classes on an element, this code takes that into account. You can safely add more classes without fidgeting with maximize and minimize.

    The 2nd thing to look at is the css. Using position:fixed will lock the element into position no matter what the scroll value is. In this example, there are 2 ways to set the div to be full screen. The first is specifying width and height at 100%. However, this is brittle.

    Its better to set top, right, bottom, and left to 0. This gives you more control. Also, suppose you wanted a thin margin around the edges. Instead of worrying about mixing top and left with width and height, you can just specify a pixel or percentage value for the 4 properties I’ve mentioned to get an easy, uniform look.

    • 0