如何让我的网站保持在窗口高度内？ [复制]答案

【问题标题】：How to make my website stay within window height? [duplicate]如何让我的网站保持在窗口高度内？ [复制]
【发布时间】：2021-04-21 16:49:47
【问题描述】：

我有

html {
    font-family: Arial, Helvetica, sans-serif; 
    height: 100%;
}
body {
    padding: 0;
    margin: 0;
    height: 100%; 
    box-sizing: border-box;
    background-color: $bgcolor;
}

.main-content {
    height: 95%; 
}

header {
    background-color: $header-bg;
    color: $header-text;
    text-align: left;
    padding: 20px;
    height: 5%;
    display: flex; 
}

我有一个带有 main-content 类和标题的 div。出于某种奇怪的原因，我在页面底部看到了额外的空白。（标题的高度为 5% - 因此主要内容的高度为 95%），任何想法为什么那里有额外的空间以及如何删除它？？

html是

<body>
        <%- include ('../partials/header.ejs') %>
        <div class="main-content">
            <%- body %>   
        </div>
</body>

标题是 -

<header>
    <a id="aaa" href="/">AAA</a>
    <nav id="topnav"> 
        --- 
    </nav>   
</header>

【问题讨论】：

使用height: 100vh 而不是100%。但是，如果我运行该代码，我根本不会遇到问题。请添加您的 HTML 以获得最小的可重现代码 sn-p (Ctrl + m)
@tacoshy 谢谢，我试过了 - 但我仍然在底部有这个空白。为 main-content div 提供 -20px 的下边距可以修复它，但这是一个非常愚蠢的解决方案，所以我仍然愿意接受任何其他选择！
就像我编辑的一样，请添加一个显示问题的最小可重现代码 sn-p (ctrl + m)。因为我无法根据您的描述使用您的 css 重现代码。
@tacoshy - 编辑它！并添加了标题内容！
好的，问题是标题的填充。 padding: 20px 增加了 40pixel 的高度。我的笔记本电脑屏幕上的 5% 转换为 15.9 像素。所以标题对于我的屏幕来说是 24.1 像素高，因此会溢出。

标签： html css whitespace

【解决方案1】：

请尝试我在此回复中与您分享的代码的 sn-p。我添加了 height: 100vh; 对应于 100% 的视口高度，应用于 html 和 body 以保持高度的一致性到屏幕的最大值，因为它们没有默认大小。此外，由于在每个屏幕场景中计算任何屏幕的最大宽度并减去您在 HEADER 标记上的 20px 填充有点困难，因此已将overflow:hidden 规则添加到此元素。

我还添加了 P 标记来测试带有 .main-content 类的 div，上面有一些实际内容，以测试整个网站，上面有一些真实内容。

我假设您正在使用一些 JavaScript HTML 标记模板生成器语言工具，例如 EJS 来创建此页面，因此我暂时将 <%- body %> 和 <%- include ('../partials/header.ejs') %> 块替换为真实内容看到最终结果。请不要忘记将它们放回原处，而不是我的硬编码内容。

我当然希望这会有所帮助。干杯，冠军！

html {
     font-family: Arial, Helvetica, sans-serif;
     height: 100vh;
     padding: 0;
}
 body {
     padding: 0;
     margin: 0;
     height: 100vh;
     min-height: 100%;
     color:#b2d8d8;
     box-sizing: border-box;
     background-color: #004c4c;
     overflow: hidden;
}
 header {
     background-color: #189ad3;
     color: #f9fafc;
     text-align: left;
     height: 5%;
     padding: 20px;
     display: flex;
     width: 100%;
     position:relative;
}
 .main-content {
     height: 100%;
}
 p {
     padding: 10px;
     text-align: justify;
     text-justify: inter-word;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML5 BoilerPlate - Alvison Hunter</title>
    <meta name="description" content="HTML5 BoilerPlate - Alvison Hunter">
    <meta name="author" content="https://alvisonhunter.com/">
    <link rel="stylesheet" href="css/styles.css?v=1.0"> </head>
<body>
        <header> <a id="aaa" href="/">AAA</a>
            <nav id="topnav"> --- </nav>
        </header>
    <div class="main-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <script src="js/scripts.js"></script>
</body>
</html>

【讨论】：

您的“anwser”如何解决问题？ sn-p 显然没有显示任何“修复”。此外，anwser 应包含足够的详细信息和说明您为解决问题实际所做的工作。
因此您将其标记为无用？我试过了，效果很好，你有没有先尝试过，然后再给我打低分？老实说，我不明白你的意思。