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

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

徐翔
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次时,它们将在中共享

  • 本文向大家介绍怎么让body高度自适应屏幕?为什么?相关面试题,主要包含被问及怎么让body高度自适应屏幕?为什么?时的应答技巧和注意事项,需要的朋友参考一下 同楼上,html,body同时设置成100%才有效,html百分比是相对于浏览器而言的,其他元素相对于父元素。 注意:这样设置会使不起作用,之前遇到过这种问题,不对的请指正。

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