Question

我使用frameset在jsp中创建了一个“母版页”，我在其他jsps中包含了母版页，其中我有一个内容所在的位置。每当窗口大小发生变化时，如何更改大小？

以下是我的示例代码：

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>

提前致谢。

Answer 1

如果要更改iframe相对于“窗口”大小的大小，请尝试使用百分比值 - 主体宽度为100％例如。

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

Answer 2

目前，您的bodydiv定义为

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

由于您在@ user8900的第一个答案的注释中指定您希望在窗口大小更改时bodydiv可以调整大小，这听起来好像您想要更改width样式属性你的div。

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

但是，在那时，我认为您可能只需从width中删除div样式属性。此外，作为一般编码风格的注释，您应该考虑将所有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 个答案: