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

2024-01-21

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

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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何让网页高度适合屏幕高度 的相关文章

  • 使用 PHP 将 class="active" 添加到活动页面

    动态标头 CSS 类更改为活动使用 PHP 目录 我想要的班级 li 在活动目录下更改标签 现在 每个指南都向我展示了当您的页面等于它时如何执行此操作 但我想更改 这 li li 取决于我所在的目录 例如 如果说我在 http exampl
  • 交替 div 使图像向左(偶数)或向右(奇数)

    我正在尝试更好地排列图像 而不仅仅是一列中的图像 请参阅附件中的示例 每篇文章的图像可以位于左侧和右侧 这是我的代码 HTML section class content list page section
  • 如何使用 jQuery 在弹出窗口中预览输入类型=“文件”中选定的图像? [复制]

    这个问题在这里已经有答案了 在我的代码中 我允许用户上传图像 现在我想在同一个弹出窗口中将所选图像显示为预览 我怎样才能使用 jQuery 做到这一点 以下是我在弹出窗口中使用的输入类型 HTML 代码
  • 响应式 CSS 图像锚点标签 - 图像地图样式

    我一直在开发一个响应式网站 并且在图像映射方面遇到了一些问题 图像映射似乎不适用于基于百分比的坐标 经过一番谷歌搜索后 我发现了一个 JS 解决方法 http mattstow com experiment responsive image
  • CSS:多属性选择器

    我想设置 电子邮件 和 密码 类型的表单输入样式 但不设置其他任何样式 我正在想象类似以下的事情 input type email type password 然而 属性选择器的工作方式似乎将其解释为 输入 其中类型同时是 电子邮件 and
  • 没有嵌套容器的桌面和移动 Flexbox 布局

    我有 3 个 div 它们必须按移动布局的特定顺序排列 但我必须将第 2 个 div 作为桌面布局的侧边栏 所以对于移动设备 分区1 分区2 分区3 对于桌面 分区1 div2 分区3 在桌面布局中 div 2 有阴影背景 因此必须是父级的
  • 可见性的替代方案:折叠在 IE 和 Chrome 上不起作用

    以下页面 table border 1 tr class cccc td one td tr table 仅适用于 Firefox IE 始终显示该行 而 Chrome 隐藏该行但显示其垂直空间 那么 如何仅使用 CSS 完全隐藏一行呢
  • 使用 获取用于 javascript 的 RSA 密钥?

    我的 Web 项目需要一个 RSA 密钥对 虽然有一些库 但我认为依靠浏览器 为了安全性和速度 为我生成密钥是个好主意 是否可以使用注册机或其他浏览器 API 来执行此操作 我不知道如何从注册机获取密钥 它们似乎是在提交时生成的 但我不想将
  • iFrame 未扩展至 100% 高度

    我有这个下面的html 我希望 iFrame 能够 100 覆盖屏幕的其余部分 我在高度属性中尝试了 100 和 但不起作用 这是为什么 谢谢 div img height 35 width 84 alt Kucku src Content
  • 输入和文本字段中的背景颜色

    我想更改表单文本和输入字段中的颜色背景 但是当我这样做时 它也会影响提交按钮 是否可以通过其他不影响按钮的方式来完成 我用过这段代码 input textarea background color d1d1d1 input type tex
  • 拖放区缩略图宽度图像大小

    如何更改上传图像的缩略图大小 我在我的javascript中尝试过thumbnailWidth 350 但是这不会增加缩略图大小 而缩略图只是看起来放大了 如何操作图像缩略图大小 HTML section section
  • 相对于变换元素的绝对定位元素位置

    我重新创建了我在模板中遇到的问题 有一个nav具有position relative 在 的里面nav有一个div有两个嵌套列表 其中一个列表的位置绝对固定在列表的底部nav 当div对其应用了变换 当 的时候div在绝对和相对定位的元素之
  • 显示带有背景颜色的百分比条

    例如 如果我有一个包含两列和 2 行的表 Col1 Percentage 50 50 70 70 如何用代表 COl1 值的颜色填充百分比列 像这样的东西 您可以使用具有两个紧接着的停止点的线性渐变 percentageFill heigh
  • 仅水平 CSS 视差效果,层数大于 100vw

    如何用水平引导网站仅 CSS 视差效果 要求 仅 CSS 视差 父层必须具有宽度 高度 100vw 100vh 子层的宽度 高度必须 gt 100vw 100vh child layers must visually align 100 w
  • React Native 上的文本缩进

    我需要缩进 React Native 段落的第一行 但使用常见的csstext indent财产 textIndent 与 React Native 不兼容 伪元素选择器也不兼容 例如 first line 有什么方法可以做到这一点而不用将
  • 在 HTML5 中将两个图像合并到一个画布上

    我正在使用 HTML5 canvas 元素 假设我有 2 个 ImageData 对象 我想将它们组合起来放在一张画布上 假设我不关心这些图像如何组合 两个 ImageData 对象具有完全相同的像素数和形状 组合两个图像的最佳方式是什么
  • Google 再营销标签 - iframe 高度问题

    我注意到 Google 的再营销代码会在我的页面底部插入一个 iframe 问题是 iframe 弄乱了我的布局 它的高度为 13 像素 并且在底部留下了空白的白色垂直空间 我尝试用 css 隐藏它 但它在 IE9 中仍然可见 iframe
  • 由于固定导航,增加了 FancyBox v2 的顶部和底部边距

    我目前正在开发一个网站 该网站将来将具有响应能力 该网站主要由图像组成 单击这些图像会加载到 FancyBox 中 FancyBox v2 现在具有响应能力 因此可以在屏幕尺寸发生变化时重新调整图像等的大小 作为我设计的一部分 我有两个固定
  • HTML 和 JavaScript - 将滚动操作从一个元素传递到另一个元素

    假设我有两个 div div div div A scrollable list div 我想让它当光标停在里面时 control并且鼠标滚轮滚动 view将会滚动 无论如何要实现这一目标 好的 快速修复对我有用 即使固定 div 不可滚动
  • 让登录更安全

    我已使用此代码进行管理员登录 仅当用户输入正确的用户名和密码时才应打开loginhome php 但后来我意识到这根本不安全 任何人都可以直接访问 mywebsite loginhome php 而无需登录 注销后 可以使用后退按钮打开 l

随机推荐

  • 使用 Python 请求对 magiccardmarket 进行 OAuth 身份验证

    我想以编程方式获取特定用户的库存http www cardmarket com http www cardmarket com 但似乎无法让 OAuth 身份验证在以下 Python 代码片段中工作 简单地使用 requests oauth
  • React Native 根据条件显示 View

    在我的渲染方法中 我想显示两个之一View组件取决于我的条件props e g render return
  • 将映射转换为结构

    我正在尝试将映射转换为结构 如下所示 我有一张地图 iex 6 gt user basic auth gt Basic Ym1hOmphYnJhMTc firstname gt foo lastname gt boo 该值应应用于结构 ie
  • UILabel 不会使用 AutoLayout 在 UIScrollView 内自动换行

    我有一个UILabel里面一个UIScrollView我正在尝试自动换行 我想使用 AutoLayout 进行布局配置 这UILabel当单词不在 a 内时 它会完美换行UIScrollView 我只需将行数设置为 0 并将换行模式设置为自
  • 如何禁用 C++ 中的转义序列

    我使用C 处理很多文件 我必须在源代码中编写文件名 如下所示 F somepath subpath myfile 我想知道是否有任何方法可以摆脱键入 来在字符串文字上下文中获取字符 即 我希望我可以写 F somepath subpath
  • 如何在构建过程中强制执行代码样式格式化?

    有没有一种方法 使用 ANT 可以自动重新格式化代码以遵循某些约定 我有几个开发人员正在开发一个程序 并且希望确保在提交之前构建时所有类的代码格式保持一致 进行预提交的最佳方法是在源代码控制服务器上使用预提交挂钩 通过这种方式 您可以强制任
  • 如何使列表视图在中心显示特定项目?

    是否有一种通用方法可以将列表视图的特定项目 例如 1000 个中的第 500 个 放置在其中心 现在我正在使用这段代码 lvData Items iIndex MakeVisible False 它很简单 但有一个缺陷 大多数所需的项目出现
  • 在 Shiny 中选择最近更改的反应式表达式

    我有一个反应式表达式 我想从最近更改的其他两个反应式表达式中获取其值 我做了以下例子 ui r shinyUI bootstrapPage column 4 wellPanel actionButton button Button chec
  • 让一个产品风味成为另一个产品风味的子风味

    我正在我的应用程序中设置产品口味 但遇到了一个问题 我的两种产品口味非常相似 只有一些资源不同 我们将它们称为 FlavorA 和 FlavorB 我想将其设置为 FlavorA 是 Fl avorB 的父级 这样 FlavorB 可以覆盖
  • 有没有快速、实用的素数生成器?

    假设我有一个自然数n我想要一个包含所有素数的列表 或其他 n 经典的素筛算法运行在O n log n 时间和O n 空间 对于命令式语言来说这很好 但需要从根本上对列表和随机访问进行就地修改 有一个涉及优先级队列的功能版本 非常灵活 你可以
  • 如何根据完成的选择选择视图控制器

    这个问题与this https stackoverflow com questions 13743777 show all tabs with scrolling option on screen there should be only
  • 理解特异性:在不使用 !important [重复] 的情况下实现所需的选择器结果

    这个问题在这里已经有答案了 我试图理解特异性 in CSS 我目前的理解是特异性与继承非常相似 但在某种程度上定义更具体 Mozilla 特异性定义 https developer mozilla org en docs Web CSS S
  • 如何为下一个子例程保留该变量的值?

    我是一名初级程序员 没有经验 正在为我现在正在做的工作学习 Visual Basic 我读了一天左右 终于决定开始制作所需的程序了 但是 我遇到了一些问题 现在我有两个子程序 第一个子例程让用户输入他们有多少个数据对 以便我可以创建一个表供
  • clojure类型转换字符串到符号

    在 clojure 中我有向量 myfn1 myfn2 myfn3 我如何使用该向量中的字符串调用名为 myfn1 的函数 调用绑定到 Var 的函数myfn1给定字符串 myfn1 你可以这样做 resolve symbol myfn1
  • Spring security/hibernate:即使它们是正确的,凭证也不好?

    嘿 我的基于 springsecurity 的登录有点混乱 我不断收到错误 凭据错误 这是我的用户表 用户表 1 这是我的 applicationContext 中的数据源
  • 如何在 PowerShell 中解析来自 Invoke-WebRequest 的 JSON?

    当向服务器发送 GET 请求时 使用自签名证书 add type using System Net using System Security Cryptography X509Certificates public class Trust
  • Docker 远程 API 是否有等效的“docker run --rm ...”?

    我希望能够在容器退出后轻松清理它们 这可以通过远程 API 实现吗 除了我自己发现出口并使用 DELETE containers 端点删除 拉斯克斯的答案现在已经过时了 Docker 远程 API 1 25shifted rm从客户端到服务
  • 如何使用 python 或(和)ruby 卸载任何应用程序

    我没有通过这个问题在网上找到任何有用的主题 这些都是关于如何卸载 python 或卸载 ruby 但没有关于 TOPIC 的信息 主要问题是我使用了其他有趣的answers https stackoverflow com questions
  • GDI泄漏问题

    我注意到使用任务管理器 以下代码中存在 GDI 泄漏 每次执行此代码时 执行此代码的进程中 GDI 对象的计数都会增加 1 但我似乎找不到问题 任何帮助 将不胜感激 create new DC based on current HDC hD
  • 如何让网页高度适合屏幕高度

    我需要使我的网页高度适合屏幕尺寸的高度而不滚动 HTML