问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

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;}

原文由 Joshua 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcss
阅读 390
2 个回答
得票最新
社区维基
1
✓ 已被采纳

一个快速、不优雅但独立工作的解决方案，带有内联 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>

原文由 Claudix 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

我使用了一个被证明是灵活的 CSS 解决方案。

您需要选择一个元素作为全高元素。它还需要成为每个内容块的父级。这可以是 <body> 元素或 DOM 中的任何位置。

此外，您必须指定一个孩子长大，以弥补伸展以填满屏幕所需的任何空间。

 .content-parent {
  min-height: 100vh;  /* Forces to always fill the screen vertically... */
  min-height: -webkit-fill-available;  /* ...except on mobile, when you want to stay within the chrome */
  display: flex;  /* Enable content to stretch... */
  flex-direction: column;  /* ...vertically */
}

.filler-child {
  flex-grow: 1;  /* Designates this element to stretch to fill */
}

示例 HTML：

 <html>
  <head>...</head>
  <body>
    <div class="parent">
      <div class="hero">...</div>
      <div class="content filler-child">...</div>
      <div class="footer">...</div>
    </div>
  </body>
</html>

原文由 Chris May 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题