gpt4 book ai didi

html - 如何在不使用 overflow-y : hidden? 的情况下摆脱 body 下方的空白

转载 作者:太空狗 更新时间:2023-10-29 16:38:25 26 4
gpt4 key购买 nike

我试图使页面适合 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com