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

我正在嘗試製作只包含頁面內的內容的網頁。頁面本身不應該有滾動條（雖然個別部分應該有滾動條）。我希望它看起來非常類似於這裏的Java API，http://java.sun.com/javase/6/docs/api/，但沒有框架。如何使HTML頁面適合網頁瀏覽器大小？

該頁面還需要能夠動態加載內容。

現在，我試圖讓它與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高度屬性？

來源

2010-06-28 Jonathan Sternberg

1）不要將這些樣式添加到您的HTML中，而是將它們放在單獨的塊或文件中。 2）我不知道你現在的例子在Firefox和Chrome中是否正確，因爲邊框的底部是不可見的（低於摺疊）3）當填充內部div時，內容太寬而不能完全可見在視口內*和*太高以至於不能放在摺疊上方，水平滾動條被向下推動，並且必須在水平滾動之前滾動到頁面的底部。 3）在IE中，你是否需要標準模式（因爲當我可以回到怪癖模式時解決方案更容易一些）？ – 2010-06-29 00:26:39

我想知道我在做什麼後，將樣式移除到單獨的css文件中。我對Web開發相對來說比較陌生，所以我並沒有試圖將它過度複雜化。爲了避免屏幕上顯示的內容過多，我將高度切換到大約98.5％，並且它似乎工作。我相信這個網站只能在IE上運行，但是我希望它至少能夠在其他瀏覽器上工作，因爲我不想創建另一個只與IE兼容的網站。很可能我會想要堅持標準模式。 – 2010-06-29 13:11:20

看起來非常像[邊框100％身高和寬度（HTML 4.01嚴格）]（http：// stackoverflow。com/questions/886809）和[具有100％高度和滾動條的IE6「框架」佈局]（http://stackoverflow.com/questions/2857412）。 – 2010-06-29 14:42:20

據我所知，唯一可行的方法是使用一些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); 
});

如果要覆蓋多個瀏覽器，你可能需要調整這一點。

來源

2010-06-28 20:32:56

我無法使用jQuery，但同樣的概念工作。 http://www.howtocreate.co.uk/tutorials/javascript/browserwindow爲IE特定的事情。 – 2010-06-29 14:20:17

爲了在元素上使用width:100% CSS屬性，元素的父級需要具有定義的高度。

您的主div的父div是body。所以，你需要申請height: 100% body標籤：

<body style="height: 100%">

編輯：以確保沒有溢出，你還希望應用margin: 0和padding: 0至body。

來源

2010-06-28 20:19:24 hundredwatt

這並不工作。它仍然做同樣的事情。 – 2010-06-28 20:22:15

嘗試在''標記中添加'height：100％''：' 這可能會解決它的IE瀏覽器 – hundredwatt 2010-06-28 21:37:35

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

回答

相關問題