代码之家 › 专栏 › 技术社区 › Jonathan Sternberg

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

updatepanel html asp.net

1

Jonathan Sternberg · 技术社区 · 16 年前

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). 我希望它看起来与Java API在这里的布局非常相似, http://java.sun.com/javase/6/docs/api/ ,但没有框架。

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

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.

有什么办法可以用沙发床吗?

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?

2 回复 | 直到 15 年前

1

5

John Fisher 16 年前

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

如果你要覆盖多个浏览器,你可能需要稍微调整一下。

2

1

hundredwatt 16 年前

为了使用 width:100% 在元素上的css属性,元素的父元素需要有一个定义的高度。

亲本 div 你的主要部门是 body . 所以你需要申请 height: 100% 到身体标签:

<body style="height: 100%">

编辑:要确保没有溢出,还需要应用 margin: 0 和 padding: 0 到 身体 .