JSP / Javascript / CSS：根据窗口大小自动调整 div 的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8004078/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JSP / Javascript / CSS : auto resize div based on window size
提问by Ianthe
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?
我使用框架集在 jsp 中创建了一个“母版页”，并将母版页包含在我的其他 jsps 中，其中我在内容所在的位置有一个。每当窗口大小发生变化时，如何更改 的大小？
Below is my sample code :
下面是我的示例代码：
masterPage.jsp
主页.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
索引.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.
提前致谢。
采纳答案by Mike
Currently your bodydivis 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 bodydivto be resizable when the window size changes, it sounds like you want to alter the widthstyle attribute on your div.
既然你在通过@ 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; ">
At that point, however, I think you could probably just remove the widthstyle attribute from the divaltogether. Further, as a general coding style note, you should think about moving all of your CSS styledefinitions to a .cssfile (or at least the existing <style>head section.)
但是，到那时，我认为您可能可以完全删除widthstyle 属性div。此外，作为一般编码风格说明，您应该考虑将所有 CSSstyle定义移动到一个.css文件（或至少现有的<style>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>
回答by user8900
If you want to change the size of the iframe relative to the 'window' size, try using percentage values - with the body width at 100% E.g.
如果您想相对于“窗口”大小更改 iframe 的大小，请尝试使用百分比值 - 主体宽度为 100% 例如
<iframe src="masterPage.jsp" name="masterPage" style="width: 80%; height: 80%;" />
