我怎样才能在不使用溢出-y:隐藏的情况下摆脱我body下方的这个空白

我试图使页面适合网络浏览器的完整视图，但由于某种原因，我在正文下方留下了空白。我添加高度的原因是，如果没有高度，它就不会与弯曲垂直对齐。

我希望能够在不隐藏溢出的情况下解决这个问题，因为这似乎不适用于响应式代码。

我尝试使正文和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);
}

也许这对你有用。

main {
    height: auto;
}

您正在向身体添加padding，height:100% 身体是 100% 高度 + 垂直padding .

您需要重置box-sizing(在body上，通常重置是通过*在所有内容上(，因此填充包含在高度计算中：

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

box-sizing CSS 属性定义用户代理应如何计算元素的总width和height。

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;
  box-sizing: border-box;  /* !!!!!!!!!!!!  Update !!!!!!!!!!!!!!! */
}
.container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
  height: 100%;
  justify-content: center;
}
main {
  height: 100%;  /* !!!!!!!!!!!!  Update !!!!!!!!!!!!!!! */
}

/* show center */
html {
background:linear-gradient(0deg, transparent 50%, rgba(0,0,0,0.2)50%),linear-gradient(90deg, transparent 50%, rgba(0,0,0,0.2)50%);

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

注意：一旦通过box-sizing包含main height上的padding，就不再需要在意

如果我猜对了，那么

尝试这些更改并通过评论更新我

变化 1

body{
   //remove this below padding
   padding: 1em;
   padding: 1em 1em 0 1em; //add this 
 }

变化 2

main{
   height: calc(100% - 2em); //remove this one also
 }

尝试添加这个我认为这将解决问题

变化 3

body{
   //remove bottom padding only
   padding: 1em 1em 0 1em; //add this 
 }

相关内容

最新更新

热门标签：