如何使 HTML 页面适合 Web 浏览器的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3135803/
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
How do you make an HTML page fit the web browser size?
提问by Jonathan Sternberg
I'm trying to make a web page that only has content within the page itself. The page itself should not have scrollbars (although individual parts should have scrollbars). I want it to look very similar to how the Java API is laid out here, http://java.sun.com/javase/6/docs/api/, but without frames.
我正在尝试制作一个仅包含页面本身内容的网页。页面本身不应该有滚动条（尽管各个部分应该有滚动条）。我希望它看起来与 Java API 在这里的布局方式非常相似，http://java.sun.com/javase/6/docs/api/，但没有框架。
The page needs to also be able to dynamically load content.
该页面还需要能够动态加载内容。
Right now, I'm trying to get it to work with the ASP !UpdatePanel for the dynamically loaded content and a div for the sizing and panel display, but the panels never cover the screen. For example, I'll have:
现在，我正试图让它与 ASP !UpdatePanel 一起工作，用于动态加载的内容和一个用于调整大小和面板显示的 div，但面板永远不会覆盖屏幕。例如，我将有：
<body style="height: 100%; margin: 0; padding: 0;">
<form id="form1" runat="server">
<div style="width: 100%; height: 100%;">
<div style="overflow: auto; height: 100%; border-style: groove; border-width: medium;">
<asp:UpdatePanel ID="TOC" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Panel ID="Display" Height="100%" ScrollBars="Auto" runat="server" />
</ContentTemplate>
</asp>
</div>
</div>
</form>
</body>
But this doesn't cover the entire height of the panel. The width is fine. But it creates a small border at the top of the page, then this expands when content gets filled in on a button press. Then the border changes. I'd much prefer the border remain static.
但这并没有覆盖面板的整个高度。宽度还好。但是它会在页面顶部创建一个小边框，然后在按下按钮时填充内容时会扩展。然后边界发生变化。我更喜欢边界保持静态。
Is there anyway to do this with divs?
有没有办法用div来做到这一点？
EDIT: I just tried this in Firefox and it worked perfectly (excluding the .NET specific things since I was on Linux without the ability to create ASP.NET pages). I need this to work with Internet Explorer 7 though (and probably Internet Explorer 6 too). Is there any neat hack around IE7 completely ignoring the css height property?
编辑：我刚刚在 Firefox 中尝试过这个，它工作得很好（不包括 .NET 特定的东西，因为我在 Linux 上无法创建 ASP.NET 页面）。我需要它与 Internet Explorer 7 一起工作（也可能是 Internet Explorer 6）。在 IE7 周围是否有任何巧妙的 hack 完全忽略了 css height 属性？
回答by John Fisher
As far as I know, the only sure way to achieve this is with some javascript.
据我所知，实现这一目标的唯一可靠方法是使用一些 javascript。
Using jQuery:
使用jQuery：
$(document).ready(function() { // Wait for the HTML to finish loading.
var resize = function() {
var height = $(window).height(); // Get the height of the browser window area.
var element = $("body"); // Find the element to resize.
element.height(height); // Set the element's height.
}
resize();
$(window).bind("resize", resize);
});
If you're covering multiple browsers, you may need to tweak this a bit.
如果您涵盖多个浏览器，则可能需要稍微调整一下。
回答by hundredwatt
In order to use the width:100%CSS property on an element, the element's parent needs to have a defined height.
为了width:100%在元素上使用CSS 属性，元素的父元素需要有一个定义的高度。
The parent divof your main div is body. So you need to apply height: 100%to the body tag:
div主 div的父级是body. 所以你需要申请height: 100%body标签：
<body style="height: 100%">
EDIT: to make sure nothing overflows, you also want to apply margin: 0and padding: 0to body.
编辑：为确保没有任何内容溢出，您还想申请margin: 0和padding: 0到body.
