如何使HTML页面适合Web浏览器大小？

Question

如何使HTML页面适合Web浏览器大小？

我正在尝试创建一个只包含页面内容的网页.页面本身不应该有滚动条(尽管各个部分应该有滚动条).我希望它看起来非常类似于Java API的布局,http://java.sun.com/javase/6/docs/api/,但没有框架.

该页面还需要能够动态加载内容.

现在,我正在尝试使用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>

Run Code Online (Sandbox Code Playgroud)

但这并未覆盖面板的整个高度.宽度很好.但它会在页面顶部创建一个小边框,然后当内容按下按钮时会扩展.然后边界改变了.我更喜欢边境保持静止.

反正有没有与divs这样做？

编辑:我刚刚在Firefox中试过这个并且它工作得很好(不包括.NET特定的东西,因为我在Linux上没有创建ASP.NET页面的能力).我需要这个可以使用Internet Explorer 7(也可能是Internet Explorer 6).IE7周围是否有任何整洁的黑客完全忽略了css height属性？

Answer 1

Joh*_*her 5

据我所知,实现这一目标的唯一可靠方法是使用一些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);
});

Run Code Online (Sandbox Code Playgroud)

如果您涉及多个浏览器,则可能需要稍微调整一下.

归档时间：	15 年，10 月前
查看次数：	24863 次
最近记录：	15 年前