可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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.

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.

Is there anyway to do this with divs?

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?

回答1:

As far as I know, the only sure way to achieve this is with some javascript.

Using 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.