Question

我正在尝试创建一个只包含页面内容的网页。页面本身不应该有滚动条（尽管各个部分应该有滚动条）。我希望它看起来非常类似于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>

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

有没有用div做这个？

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

Answer 1

据我所知，唯一确定的方法是使用一些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);
});

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

Answer 2

为了在元素上使用width:100% CSS属性，元素的父元素需要具有定义的高度。

主div的父div为body。因此，您需要将height: 100%应用于正文标记：

<body style="height: 100%">

编辑：为了确保没有任何溢出，您还要将margin: 0和padding: 0应用于body。

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

2 个答案: