我试图使页面适合 Web 浏览器的完整 View ，但由于某种原因，我在正文下方留下了空白。我添加高度的原因是没有高度，它不会与 flex 垂直对齐。
我希望能够在不隐藏 overflow-y 的情况下解决这个问题，因为这似乎不适用于响应式代码。
我已尝试将正文和 HTML 设为 100%，这阻止了我垂直对齐容器。
该页面位于 Github 上，如果您希望在那里看到它。您会在所有内容下方看到一个空白区域: http://kaleshe.co.uk/portfolio
这是我在测试时检查过的主要 HTML 的片段:
<body>...
<header>...</header>
<main>
<div class="container" id="index">
<section>
<h1>Web Designer in London</h1>
<h2>I create beautiful websites that are easy to use on mobile and desktop.</h2>
<a href="work.html"><button class="btn-dark">View Work</button></a>
</section>
</div>
</main>
</body>...
这是一些相关的 CSS:
html {
height: 100%;
}
body {
font-family: 'Poppins', sans-serif;
font-size: 18px;
color: var(--secondary-colour);
background: linear-gradient(130deg, var(--main-colour) 0%, var(--main-colour) 20%, #000a18 100%);
background-image: url('../img/city.svg'), linear-gradient(130deg, var(--main-colour) 0%, var(--main-colour) 20%, #000a18 100%);
background-repeat: no-repeat;
background-position: 50% 100%;
line-height: 1.7em;
height: 100%;
padding: 1em;
margin: 0;
}
.container {
display: flex;
max-width: 1200px;
margin: 0 auto;
align-items: center;
height: 100%;
justify-content: center;
}
main {
height: calc(100% - 2em);
}
我希望任何地方都没有空白。但是目前有空白
最佳答案
在链接页面中，<ul> 的默认边距(由用户代理样式表设置)用于导航的元素抵消了您的 <main>元素，创建空白。
根据您的喜好，您可以删除 <ul> 的默认边距。或调整您的 <main> 的大小.
ul {
margin: 0;
}
/* or */
main {
height: calc(100% - 4em);
}
关于html - 如何在不使用 overflow-y : hidden? 的情况下摆脱 body 下方的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55549647/