Home/ Questions/Q 886759
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T13:07:20+00:00

I’m trying to make a web page that only has content within the page

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0