时间戳

首页 > 解决方案 > 网站占用的空间超出其应有的空间（超过 100vh）

html - 网站占用的空间超出其应有的空间（超过 100vh）

问题描述

嗨，我目前正在开发一个小型 Web 界面。我的问题是出现了一个垂直滚动条，即使我已经设置了

body{
        height:100vh;
        margin:0;
        padding:0;
    }

据我了解，这应该将主体的高度设置为视口的完整高度，同时删除每个边距/填充。这意味着身体周围没有空间，所以不应该有任何滚动。

这是当前视图的屏幕截图。 当前视图 如您所见，有一个垂直滚动条以及页脚未正确显示。

我的当前代码可以在这里找到：

:root {
  --white: #FFFFFF;
  --grey_237: #EDEDED;
  --grey_220: #DCDCDC;
  --grey_178: #B2B2B2;
  --grey_107: #6B6B6B;
  --functional_red: #D90000;
  --fucntional_yellow: #FECB00;
  --functional_green: #46A800;
  --functional_blue: #009DE0;
  --company: #544b83
}

.card-3 {
  grid-column-end: span 3
}

.card-4 {
  grid-column-end: span 4
}

.card-5 {
  grid-column-end: span 5
}

.card-10 {
  grid-column-end: span 10
}

.justify_right {
  justify-items: end;
  text-align: end
}

.no_margin {
  margin: 0
}

.no_padding {
  padding: 0
}

.start-1 {
  grid-column-start: 1
}

.start-2 {
  grid-column-start: 2
}

.start-3 {
  grid-column-start: 3
}

.start-4 {
  grid-column-start: 4
}

.start-5 {
  grid-column-start: 5
}

.deep-2 {
  grid-row-end: span 2
}

.uppercase {
  text-transform: uppercase
}

.card {
  background-color: #fff
}

body {
  background-color: var(--grey_237);
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-gap: 25px;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 90%
}

#content {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 25px
}

.color_bg {
  background-color: var(--company);
  color: var(--white)
}

#brand_header {
  display: grid;
  height: 70px;
  text-align: center;
  align-content: center
}

#slogan {
  display: grid;
  align-content: center;
  font-weight: 900
}

#branding_title {
  font-weight: 700;
  color: var(--company)
}

#content_title {
  color: var(--company);
  font-size: 3em;
  font-weight: 900;
}

.card_title {
  font-weight: 600!important;
  font-size: 2em
}

.card-right {
  display: grid;
  grid-template-columns: 1fr 1fr
}

.card-right .card-body {
  display: grid;
  grid-gap: 5px
}

.card_change {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 5px;
  align-items: center
}

.card_value {
  display: grid;
  align-self: end
}

.card_change {
  display: grid;
  align-self: start
}

.card_graph {
  background-image: url(https://via.placeholder.com/150x150?text=graph);
  background-size: cover;
  background-position: center
}

#trends {
  background-image: url(https://via.placeholder.com/550x350?text=graph);
  background-size: cover;
  background-position: center
}

#footer {
  display: grid;
  height: 40px;
  background-color: white;
  display: grid;
  align-items: center
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

  <!--  custom css -->
  <link rel="stylesheet" href="style.css">


  <title>Site</title>
</head>

<body>
  <div id="header">
    <div id="brand_header" class="color_bg">
      <div class="container">
        <div id="header_text" class="row justify-content-between">
          <div id="slogan" class="justify_right">
            <p class="no_margin uppercase">Our slogan</p>
          </div>
        </div>
      </div>
    </div>
    <div id="navbar">
      <nav class="navbar navbar-light bg-light">
        <div class="container no_padding">
          <span class="navbar-brand no_margin uppercase" id="branding_title">
                        Our Team
                    </span>
        </div>
      </nav>
    </div>
  </div>


  <div id="content" class="container no_padding">
    <div class="card-3 start-1">
      <h2 id="content_title">title</h2>
    </div>

    <div id="card_1" class="card card-3 start-1 card-right">
      <div class="card-body">
        <h5 class="card_title text-muted">Card 3</h5>
        <h2 class="card_value no_margin">Data</h2>
        <div class="card_change">
          <span id="card_1_change_value" class="change_value">change</span>
        </div>
      </div>
      <div id="card_1_graph" class="card_graph thumbnail ">
        <div class="chart-container" style="position: relative; width:99%; height:99%;">
          <canvas id=""></canvas>
        </div>
      </div>
    </div>

    <div id="trends" class="card card-10 deep-2 ">
      <div class="chart-container" style="position: relative; width:99%; height:99%;">
        <canvas id=""></canvas>
      </div>
    </div>


  </div>




  <div id="footer">
    <div class="container">
      footer
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>

</html>

可以在此处找到 codepen 的链接：
Codepen 链接

卡片内会有一些图表。这就是为什么有以下片段的原因：

<div class="chart-container" style="position: relative; width:99%; height:99%;">
    <canvas id=""></canvas>
</div>

它是根据chart.js 的文档创建的

我对问题原因的看法

我目前的想法是身体的内容要大才能正确渲染。虽然这听起来是一个合理的原因，但我不知道为什么会发生这种情况，因为我使用的是相对单位。

我很乐意为您提供帮助，并提前感谢大家。

后来补充：

我试着用

overflow:hidden;

这里的问题是，即使它解决了滚动条问题，网页仍然没有显示 while 视图（只有一半的页脚）

当我看到这个时，我正在查看开发工具： img_through_dev_tools 似乎身体正在正确缩放（100vh），但页脚似乎部分呈现在身体之外。不知道为什么会这样，但看起来很有趣。

有一种想法是我grid-gap造成了这个问题，因为它造成了一个差距。我在这里对此进行了测试，这不是问题，因为该fr单元正在相应地进行调整。

body {
  margin: 0;
  padding: 0;
  height: 100vh;
}

.content {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-gap: 25px;
}

#div1 {
  background-color: aquamarine;
}

#div2 {
  background-color: blanchedalmond;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="content">
    <div id="div1">
      This is div 1
    </div>
    <div id="div2">
      This is div 2
    </div>
  </div>
</body>

</html>

然后我尝试了相同的方法，但使用margin而不是grid-gap. 结果仍然与fr不仅调整到网格间隙而且调整所有其他填充/边距相同。

body {
  margin: 0;
  padding: 0;
  height: 100vh;
}

.content {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
}

#div1 {
  background-color: aquamarine;
}

#div2 {
  margin-top: 25px;
  background-color: blanchedalmond;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="content">
    <div id="div1">
      This is div 1
    </div>
    <div id="div2">
      This is div 2
    </div>
  </div>
</body>

</html>

标签： htmlcssflexboxcss-grid

解决方案

推荐阅读