Question

180

JSP / Javascript / CSS : auto resize div based on window size

rated 0 times [ 184] [ 4] / answers: 1 / hits: 15518 / 13 Years ago, fri, november 4, 2011, 12:00:00

I created a master page in jsp using frameset, and I included the master page in my other jsps where i have a in the where the contents will be. How can I change the size of the whenever the window size changes?

Below is my sample code :

masterPage.jsp

<html>

<frameset style=border: 0; rows=135,*,38 style=z-index:1 >

    <frame id=headerFrame noresize=noresize name=ffwHeader frameborder=0 scrolling=no src=header.jsp style=z-index:1 />

    <frame name=ffwMenu frameborder=0 scrolling=no src=menu.jsp style=z-index:3 />

    <frame name=ffwFooter noresize=noresize frameborder=0  scrolling=no src=footer.jsp style=z-index:1 />

</frameset>

index.jsp

<html>

<head>

    <title>Upload A Disposition Rule</title>

    <style type=text/css>

        html, body, div, iframe { margin:0; padding:0; height:100%; }

        iframe { display:block; width:100%; border:none; }

    </style>

</head>



<body >

    <div id=bodydiv align=center style=position:fixed; top:135px;left:182px; z-index:2; bottom: 38px;  height:  510px; width: 1080px; overflow: auto; >

        <!--contents-->

    </div>

    <iframe src=masterPage.jsp name=masterPage />

</body>

Thanks in advance.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

minab

Add To Favorites

Follow

Total Points: 701

Total Questions: 104

Total Answers: 91

Location: Saint Pierre and Miquelon

Member since Fri, Jan 28, 2022

2 Years ago

minab questions

1 Update a Table with React Hooks when a Row is Added, Deleted and Modified? [Issue: Gets Before Post and Delete]

Sat, Jul 10, 21, 00:00, 3 Years ago

1 How to click one button that exists two times with same name?

Fri, Feb 7, 20, 00:00, 4 Years ago

1 Unable to copy array using setstate hook

Tue, Oct 1, 19, 00:00, 5 Years ago

1 How to change day-format (M > Mo, F > Fr...) in Date/month pickers of Vuetify

Tue, Aug 20, 19, 00:00, 5 Years ago

1 Bootstrap Modal is not working in React JS

Thu, Jul 25, 19, 00:00, 5 Years ago

View All

answered 13 Years ago allanw · Accepted Answer

Currently your bodydiv is defined as

    <div id=bodydiv align=center style=position:fixed; top:135px;left:182px; z-index:2; bottom: 38px;  height:  510px; width: 1080px; overflow: auto; >

Since you specified in the comment to the first answer by @user8900 that you want the bodydiv to be resizable when the window size changes, it sounds like you want to alter the width style attribute on your div.

    <div id=bodydiv align=center style=position:fixed; top:135px;left:182px; z-index:2; bottom: 38px;  height:  510px; width: '100%'; overflow: auto; >

At that point, however, I think you could probably just remove the width style attribute from the div altogether. Further, as a general coding style note, you should think about moving all of your CSS style definitions to a .css file (or at least the existing <style> head section.)

<head>

    <title>Upload A Disposition Rule</title>

    <style type=text/css>

        html, body, div, iframe { margin:0; padding:0; height:100%; }

        iframe { display:block; width:100%; border:none; }

        #bodydiv { position:fixed; top:135px;left:182px; z-index:2; bottom: 38px;  height:  510px; width: '100%'; overflow: auto; }

    </style>

</head>



<body>

    <div id=bodydiv align=center>

        <!--contents-->

    </div>

    (etc...)

</body>