如何使我的网站保持在窗口高度内?

我有

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

和我有一个div类main-content和一个标题。由于一些奇怪的原因，我在页面底部看到了额外的空白。(头部有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;对应于viewport高度的100%，应用于html和body以保持高度的一致性到屏幕的最大值，因为它们没有默认大小。此外，由于很难计算任何屏幕的最大宽度并减去每个屏幕场景中HEADER标签上的20px填充，因此该元素添加了overflow:hidden规则。

我还添加了p标签来测试div与类.main-content上的一些实际内容，以测试整个网站与它的一些实际内容。

我假设你正在使用一些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>

相关内容

最新更新

热门标签：