如何使 HTML 页面适合网络浏览器的大小？

发布于 2024-09-07 04:47:07 字数 1188 浏览 1 评论 0原文

我正在尝试制作一个仅包含页面本身内容的网页。页面本身不应该有滚动条（尽管各个部分应该有滚动条）。我希望它看起来与 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 属性的巧妙技巧？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜心小果奶 2024-09-14 04:47:07

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

如果您覆盖多个浏览器，您可能需要对此进行一些调整。

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 原文