如何使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页面适合网页浏览器大小？

回答

相关问题