Question

我正在开发一个具有适合页面的界面的应用程序（仅某些内部元素可以滚动）。基本布局由标题和主要部分组成：

<div class="page">
  <Navigation/> <!-- a Vue component -->
  <main class="page__main">
    ...
  </main>
</div>

当前，CSS的标头（Navigation）高度已硬编码：

.page {
    height: 100vh;
}
.page__main {
    height: calc(100vh - 80px); /* 80px is the height of the header */
}

我想摆脱此硬编码位，但要确保.page__main的高度不大于100vh - height of Navigation。没有JS，有没有办法做到这一点？我怀疑有些选项可以与

一起使用

.page {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

但仅用于

.page__main {
    flex-shrink: 1;
}

不起作用：.page__main的孩子使用百分比的height，并且一旦我设置了flex-shrink: 1;而不是height: calc(100vh - 80px);，这些孩子就长大了，界面也坏了。

为更好地说明问题，以下是当前状态：

body { padding: 0; margin: 0; }
.page {
  height: 100vh;
  background: blue;
}
.page__navigation {
  height: 80px;
  background: gray;
}
.page__main {
  height: calc(100vh - 80px);
}
.part1 {
  height: 50%;
  background: #eeeeee;
  overflow-y: scroll;
}
.part2 {
  height: 50%;
  background: #cccccc;
}

<div class="page">
  <div class="page__navigation">nav stuff</div>
  <main class="page__main">
    <div class="part1">
      this one usually has more elements than it could contain and those are shown with scrolling
      <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line
    </div>
    <div class="part2">
      some
    </div>
  </main>
</div>

这是当我尝试通过flex“设置高度”时发生的事情：

body { padding: 0; margin: 0; }
.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: blue;
}
.page__navigation {
  height: 80px;
  background: gray;
}
.page__main {
  flex-shrink: 1;
}
.part1 {
  height: 50%;
  background: #eeeeee;
  overflow-y: scroll;
}
.part2 {
  height: 50%;
  background: #cccccc;
}

<div class="page">
  <div class="page__navigation">nav stuff</div>
  <main class="page__main">
    <div class="part1">
      this one usually has more elements than it could contain and those are shown with scrolling
      <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line
    </div>
    <div class="part2">
      some
    </div>
  </main>
</div>

Answer 1

您可以考虑使用嵌套的flexbox容器，不要忘记使用min-height:0;来允许the elements to shrink.

body { padding: 0; margin: 0; }
.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: blue;
}
.page__navigation {
  height: 80px;
  background: gray;
}
.page__main {
  flex-grow: 1; /* Fill the remaining space*/
  display:flex; /* Nested Container*/
  flex-direction:column;
  min-height:0;  /* Allow the element to shrink */
}
.part1 {
  flex-basis: 50%;
  background: #eeeeee;
  overflow-y: scroll; /* Allow the element to shrink */
}
.part2 {
  flex-basis: 50%;
  min-height:0; /* Allow the element to shrink */
  background: #cccccc;
}

<div class="page">
  <div class="page__navigation">nav stuff</div>
  <main class="page__main">
    <div class="part1">
      this one usually has more elements than it could contain and those are shown with scrolling
      <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line
    </div>
    <div class="part2">
      some
    </div>
  </main>
</div>

Answer 2

使用public static int dayOfWeek(int year, int month, int day) { return (days(year, month, day)-4)%7; }。将所有内容保留为第二个（灵活的一个）并进行更改：

修改

flex-grow

三个值flex表示.page { height: 100vh; display: flex; flex-direction: column; background: blue; } .page__main { height: 100%; min-height: 0; flex: 1 1 auto; }。

flex: flex-grow | flex-shrink | flex-basis告诉我们的元素它是否可以占用额外的空间。

Flex-grow的工作原理与flex-grow非常相似，只是处理了元素内容不需要的空间，而不是处理多余的空间。

Flex-shrink最好与flex-shrink或flex-grow结合使用。

您可以查看this文章以更好地理解。

Answer 3

我建议使用css-grid方法：-

.page {
  background: gray;
  display: grid;
  grid-template-rows: 100px auto;
  height: 100vh;
  color: white;
}

.nav {
  grid-row: 1/2;
  background: brown;
}
.main {
  grid-row: 2/3;
  background: green;
  display: grid;
  grid-template-rows: 30% 70%;
}
.part1 {
  overflow: auto
}
.part2 {
  background: blue
}

<div class="page">
  <div class="nav">Nav</div>
    <div class="main">
      <div class="part1">
        this one usually has more elements than it could contain and those are shown with scrolling
      <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line
      </div>
      <div class="part2">
        some
      </div>
    </div>
  </div>
</div>

如何使2个元素适合页面高度？

3 个答案: