如何使HTML頁面適合網絡瀏覽器的大小？

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標簽：

<body style="height: 100%">

編輯：為確保沒有溢出，您還想將margin: 0和padding: 0應用於body 。

如何使HTML頁面適合網絡瀏覽器的大小？

問題描述

2 個解決方案

解決方案1
5 已采納 2010-06-28 20:32:56

解決方案2
1 2010-06-28 20:19:24

如何使HTML頁面適合網絡瀏覽器的大小？

問題描述

2 個解決方案

解決方案1 5 已采納 2010-06-28 20:32:56

解決方案2 1 2010-06-28 20:19:24

解決方案1
5 已采納 2010-06-28 20:32:56

解決方案2
1 2010-06-28 20:19:24