如何使HTML页面适合网络浏览器的大小? [英] How do you make an HTML page fit the web browser size?
问题描述
我正在尝试制作一个仅包含页面本身内容的网页.页面本身不应具有滚动条(尽管各个部分都应具有滚动条).我希望它看起来与Java API在这里的布局非常相似，>//java.sun.com/javase/6/docs/api/，但没有框架.
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.
页面还需要能够动态加载内容.
The page needs to also be able to dynamically load content.
现在，我正在尝试使其与ASP！UpdatePanel一起用于动态加载的内容，并与div一起用于调整大小和面板显示，但是面板永远不会覆盖屏幕.例如，我将拥有:
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:
<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.
反正有div可以做到这一点吗?
Is there anyway to do this with divs?
我刚刚在Firefox中尝试了这一点，并且运行良好(不包括.NET特定的功能，因为我在Linux上无法创建ASP.NET页).我需要它与Internet Explorer 7一起使用(可能还有Internet Explorer 6).IE7周围是否有任何整洁的技巧，完全忽略了CSS的height属性?
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?
推荐答案
据我所知，唯一可以肯定的方法是使用一些javascript.
As far as I know, the only sure way to achieve this is with some javascript.
使用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.
这篇关于如何使HTML页面适合网络浏览器的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
