JSP / Javascript / CSS：根据窗口大小自动调整div的大小

Question

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. 我使用框架集在jsp中创建了一个“母版页”，并将该母版页包含在其他jsps中，其中的内容将在其中包含。 How can I change the size of the whenever the window size changes? 每当窗口大小更改时，如何更改的大小？

Below is my sample code : 以下是我的示例代码：

masterPage.jsp 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 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. 提前致谢。

Answer 1

如果您要更改iframe相对于“窗口”尺寸的尺寸，请尝试使用百分比值-车体宽度为100％

<iframe src="masterPage.jsp" name="masterPage" style="width: 80%; height: 80%;" />

Answer 2

Currently your bodydiv is defined as 目前，您的bodydiv定义为

    <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 . 由于您在@ user8900的第一个答案的注释中指定要在窗口大小更改时对bodydiv进行调整大小，因此听起来您想更改div上的width样式属性。

    <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. 但是，到那时，我认为您可能只需将div的width样式属性完全删除即可。 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.) 此外，作为一般的编码样式说明，您应考虑将所有CSS style定义移至.css文件（或至少移至现有的<style>头部）。

<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>

JSP / Javascript / CSS：根据窗口大小自动调整div的大小

问题描述

2 个解决方案

解决方案1
0 2011-11-04 02:46:25

解决方案2
0 已采纳 2011-11-04 13:30:30

JSP / Javascript / CSS：根据窗口大小自动调整div的大小

问题描述

2 个解决方案

解决方案1 0 2011-11-04 02:46:25

解决方案2 0 已采纳 2011-11-04 13:30:30

解决方案1
0 2011-11-04 02:46:25

解决方案2
0 已采纳 2011-11-04 13:30:30