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

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

javascript css jsp

JSP/Javascript/CSS：根据窗口大小自动调整div大小,javascript,css,jsp,Javascript,Css,Jsp,我使用frameset在jsp中创建了一个母版页，并将母版页包含在我的其他jsp中，我在内容所在的位置有一个。当窗口大小更改时，如何更改窗口的大小下面是我的示例代码： masterPage.jsp <html> <frameset style="border: 0;" rows="135,*,38" style="z-index:1" > <frame id="headerFrame" noresize="noresize" name="ffwHeader

我使用frameset在jsp中创建了一个母版页，并将母版页包含在我的其他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

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

提前感谢。

如果您想更改iframe相对于“窗口”大小的大小，请尝试使用百分比值-车身宽度为100%，例如

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

目前，您的bodydiv定义为

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

然而，在这一点上，我认为您可以完全从div中删除width样式属性。此外，作为一般的编码样式说明，您应该考虑将所有CSS样式定义移动到.CSS文件或至少移动到现有的head部分

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

谢谢你的回复，但我需要的是改变窗口的大小，使之相对于窗口大小

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