height 100vh 给出垂直滚动条答案

【问题标题】：height 100vh is giving vertical scrollbarheight 100vh 给出垂直滚动条
【发布时间】：2023-01-11 17:12:48
【问题描述】：

我面临 height 100vh 的问题，它给出了垂直滚动条。我将外部内容嵌入到高度为 100vh 的 widger-holder div 中。但是 widget-holder 中的内容超出父 div 并给出垂直滚动条。

如果删除固定标题，则看不到垂直滚动条。但我无法删除它。如果我降低 widget-holder div 中的高度，一些内容将不可见。所以我无法降低高度。

我需要一个解决方案来使 widget-holder 内容与父高度完全匹配。

html {
  --banner-menu-width: 250px;
  --ps-facets-width: 280px;
  --left-column-width: 349px;
  --main-column-width: 890px;
  --right-column-width: 0px;
}

* {
  box-shadow: none;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  caret-color: #4181af;
  font-size: 12px;
  line-height: 142%;
  margin: 0;
  overflow-y: scroll;
  background-color: #f3f3f4;
  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 100%;
}

#app {
  display: grid;
  grid-template-columns: 0 250px auto;
  grid-template-rows: auto;
}

#app-content {
  background-color: #f3f3f4;
  grid-column: 3;
  display: grid;
  grid-template-columns: 100%;
  /* height: 100vh; */
}

#fixed-header {
  display: grid;
  grid-template-columns: 100%;
  background-color: antiquewhite;
  top: 0;
  position: sticky;
  z-index: 400;
  height: 60px;
}

#app #dynamic-style {
  visibility: hidden;
  grid-column: 1;
}

#app #banner {
  grid-column: 2;
  grid-row-start: 1;
  grid-row-end: -1;
  min-height: 100vh;
  max-height: 5000px;
  display: flex;
  justify-content: stretch;
  position: fixed;
  width: var(--banner-menu-width);
  z-index: 450;
}

#app #banner .banner-background {
  background: #223645;
  z-index: 500;
  align-self: stretch;
  width: 100%;
}

.dashboard-container {
  height: 100%;
}

.widget-holder {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: Arial, sans-serif;
  background: aqua;
}

<div id="app" class="grid-container">
  <div id="dynamic-style"></div>
  <div id="banner">
    <div class="banner-background"></div>
  </div>
  <div id="app-content" class="regular-workspace">
    <div id="fixed-header"></div>
    <div class="dashboard-container">

      <div class="widget-holder"></div>

    </div>
  </div>
</div>

【问题讨论】：

我在您的代码中没有看到 position: fixed。您使用 position: sticky 来增加额外的高度。如果您实际使用position: fixed，它会起作用。
@VilleKoo 该问题与默认保证金无关。他在他的 CSS 中重置了它。因此，您的链接副本不适用于此处。

标签： html css

【解决方案1】：

您将页眉设置为粘性，以便它占用一些空间并为其余的兄弟更改页面的顶部点。您可以从小部件持有者的高度中提取标题的高度。

.widget-holder {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    font-family: Arial, sans-serif;
    background: aqua;
  }

在我的实验中，这解决了这个问题。

【讨论】：