Question

我试图使页面适合Web浏览器的整个视图，但是由于某些原因，我在主体下方留有空白。我添加高度的原因是，没有高度，它就不会与flex垂直对齐。

我希望能够在不隐藏溢出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);
}

我希望任何地方都没有空格。但是目前有空白

Answer 1

在链接的页面中，用于导航的<ul>元素的默认边距（由用户代理样式表设置）偏移了<main>元素，从而创建了空白。根据您的喜好，您可以使用删除<ul>的默认边距，也可以调整<main>的大小。

ul {
  margin: 0;
}
/* or */
main {
  height: calc(100% - 4em);
}

Answer 2

如果我答对了

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

更改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 
 }

Answer 3

也许这对您有用。

main {
    height: auto;
}

Answer 4

您要在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>

注意：一旦通过padding将main包含在height的{{1}}上，就不必介意box-sizing

如何在不使用overflow-y：隐藏的情况下摆脱身体下方的空白区域？

4 个答案: