当前位置: 首页 > 面试题库 >

如何使网页高度适合屏幕高度

徐翔
2023-03-14
问题内容

我需要使我的网页高度适合屏幕尺寸的高度,而无需滚动。

HTML

<body>
    <form id="form1" runat="server">
    <div id="main">
        <div id="content">

        </div>
        <div id="footer">

        </div>
    </div>
    </form>
</body>

CSS

#content{ background-color:#F3F3F3; margin:auto;width:70%;height:700px;}
#footer{width:100%;background-color:#666666;height:200px;}

问题答案:

一个快速,简洁,有效的独立解决方案,带有内联CSS,无jQuery要求。AFAIK也可以从IE9使用。

<body style="overflow:hidden; margin:0">
    <form id="form1" runat="server">
        <div id="main" style="background-color:red">
            <div id="content">

            </div>
            <div id="footer">

            </div>
        </div>
    </form>
    <script language="javascript">
        function autoResizeDiv()
        {
            document.getElementById('main').style.height = window.innerHeight +'px';
        }
        window.onresize = autoResizeDiv;
        autoResizeDiv();
    </script>
</body>


 类似资料:
  • 我如何才能使它的应用程序是优化的所有屏幕?

  • 问题内容: 我试图找到屏幕的宽度和高度,但是我尝试过的任何方法都无法在我创建的类中使用,下面是我的代码。 有人知道如何找到它吗?我无法使用下面尝试的方式,因为.getWidth()已弃用? 问题答案: 使用以下代码

  • 我有一个带高度的:match_parent,它在adapter中以固定高度垂直显示16个项目。除了屏幕大小不同之外,一切都很好。在大屏幕上,16个项目显示后,底部仍留有一个空间,而在小屏幕手机上,它完全适合底部。我正在寻找一种方法,可以将列表项的高度调整为高度,直到结束时不可滚动。 查看下面的屏幕截图以了解更多说明 问题: 期望: 我的方法是将项目权重设置为1,因此当渲染到16次时,它们将在中共享

  • 问题内容: 如何获取Android屏幕的可用高度?我需要减去状态栏/菜单栏或屏幕上可能显示的任何其他装饰的高度,并且需要它适用于所有设备。另外,我需要在onCreate函数中知道这一点。我知道之前曾有人问过这个问题,但我已经尝试过他们的解决方案,但没有一个起作用。这是我尝试过的一些方法: 我已经在API 7-17上测试了此代码。不幸的是,在API 13的水平和垂直底部都没有多余的空间,而在API

  • 在Android系统中如何获得屏幕的可用高度?我需要的高度减去状态栏/菜单栏或任何其他可能在屏幕上的装饰,我需要它为所有设备工作。另外,我需要在onCreate函数中了解这一点。我知道这个问题以前有人问过,但我已经尝试过他们的解决方案,但没有一个奏效。以下是我尝试过的一些事情: 我已经在API7-17上测试了这段代码。不幸的是,在API 13的底部水平和垂直都有额外的空间,而在API 10、8和7