Javascript 如何将子块的高度设置为100%

我正在对某个站点布局进行编码，我需要将子块的高度设置为100%，也就是说，不管监视器的大小，子块都会伸展到全高，这让我想起

100vh

，但问题是它对我不起作用（可能我没有正确应用）

我想达到这个结果

橙色块与滚动相关，但我只需要拉伸橙色块，坦率地说，这种布局不是最好的，但我试图使其尽可能干净，你可以看到这一点

我将在下面留下代码，但它非常庞大，因此我认为在codesandbox中学习此代码会更方便

<template>
  <div>
    <div class="calendar-top-container">
      <div class="close">
        <img width="20" height="20"
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/OOjs_UI_icon_close.svg/1200px-OOjs_UI_icon_close.png"
          alt=""
        />
      </div>

      <div class="headline-mounth-container">
        <div class="mount-container-icon">
          <div>
            <date-pick
              v-model="date"
              :format="format"
              :parseDate="parseDate"
              :formatDate="formatDate"
            >
              <template v-slot:default="{ toggle, inputValue }">
                <div style="display: flex; align-items: center">
                  <div class="mount-container">
                    <h1>
                      <span class="mount-title">
                        <span class="dow"
                          >{{ inputValue.split(",")[0] }},
                        </span>
                        <span class="date">{{ inputValue.split(",")[1] }}</span>
                      </span>
                    </h1>
                  </div>

                  <div
                    @click="toggle"
                    style="display: flex; align-items: center; cursor: pointer"
                  >
                    <img
                      width="18"
                      height="18"
                      style="margin-right: 5px"
                      src="~@/assets/Images/Calendar/bx_bx-calendar.svg"
                      alt="Calendar"
                    />
                    <img src="~@/assets/Images/Calendar/arrow.svg" alt="" />
                  </div>
                </div>
              </template>
            </date-pick>
          </div>
        </div>
        <div class="switched-container">
          <div>
            <p
              v-on:click="enabled = !enabled"
              v-bind:class="[enabled ? null : 'firstActive']"
              class="switch-desc"
            >
              This week
            </p>
          </div>
          <div class="switched-child-container">
            <switches
              class="switches-style"
              v-model="enabled"
              theme="bootstrap"
              color="danger"
            ></switches>
          </div>
          <div>
            <p
              v-on:click="enabled = !enabled"
              v-bind:class="[enabled ? 'secondActive' : null]"
              class="switch-desc"
            >
              Next week
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar-container">
      <div class="calendar-wrapper">
        <div class="headline-dots-group">
          <div class="dots-group">
            <div class="first-dot-group">
              <div class="dot-group">
                <div><p>Standart</p></div>
                <div class="dot dot-1"></div>
              </div>
              <div class="dot-group">
                <div><p>Standart</p></div>
                <div class="dot dot-2"></div>
              </div>
            </div>

            <div class="second-dot-group">
              <div class="dot-group">
                <div><p>Standart</p></div>
                <div class="dot dot-3"></div>
              </div>
              <div class="dot-group">
                <div><p>Standart</p></div>
                <div class="dot dot-4"></div>
              </div>
            </div>
          </div>

          <div class="time-title">
            <h2>GIRLS</h2>
          </div>

          <div class="girls-list">
            <div
              v-for="(item, index) in girlsList"
              :key="index"
              class="girl-info"
            >
              <div>
                <img :src="item.avatarSrc" alt="" />
              </div>
              <div>
                <div class="girl-name-container">
                  <p>{{ item.girlName }}</p>
                </div>
                <div class="girl-time-container">
                  <div>
                    <span class="girl-time">{{ item.girlTime }}</span>
                  </div>
                  <div>
                    <span class="day-of-time">PM</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="time-container">
          <div class="Container Flipped">
            <div class="Content">
              <div>
                <ul>
                  <li v-for="item in timeSlots" :key="item">
                    {{ item }}
                  </li>
                </ul>
              </div>

              <div class="time-progress-container">
                <ul>
                  <li
                    style="display: block"
                    class="date-container"
                    v-for="(item, index) in timeSlots"
                    :key="index"
                  >
                    {{ item }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <div class="view-container">
          <div class="View">
            <div>
              <p>View</p>
            </div>
            <div>
              <img width="20" height="20" src="https://pics.freeicons.io/uploads/icons/png/15211315791553239378-512.png" alt="" />
            </div>
            <div>
              <img width="20" height="20"
                src="https://pics.freeicons.io/uploads/icons/png/15211315791553239378-512.png"
                alt=""
              />
            </div>
          </div>

          <div class="right-bg"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.date-container {
  height: 56px;
  background: #2d2d2d;
}

/* girl-list */

.girl-name-container {
  display: flex;
  justify-content: flex-end;
}

.girls-list {
  height: 350px;
  padding-top: 10px;
  overflow: auto;
  direction: rtl;
}

.girl-info {
  display: flex;
  align-items: flex-end;
  flex-direction: row-reverse;
  margin-bottom: 5px;
}

.girl-info div img {
  margin-right: 10px;
  border-radius: 5px;
  width: 91px;
  height: 50px;
  max-width: 100%;
}

.girl-info div p {
  font-family: "Montserrat-Medium";
  font-size: 13px;
  margin: 0;
}

.girl-time,
.day-of-time {
  font-size: 10px;
  font-family: "Montserrat-Medium";
  font-weight: 600;
}

.girl-time-container {
  display: flex;
  flex-direction: row-reverse;
}

.girl-time {
  margin-right: 5px;
  color: #CC003D;
}

.day-of-time {
  color: #000000;
}

/* ****************** */

/* time-progress */

.time-progress-container {
  width: 100%;
  height: 100%;
  background: orange;
  margin-top: 10px;
}

/* ****************** */

/* switched-container */
.date {
  color: #000;
}

.vue-switcher-theme--bulma.vue-switcher-color--default.vue-switcher--unchecked
  div:after {
  background-color: #f5f5f5 !important;
}

.switched-container {
  display: flex;
  align-items: center;
}

.switched-container div p {
  font-family: Montserrat-Medium;
  font-size: 10px;
}

.switched-child-container {
  margin: 0 10px 0 10px;
}

.switch-desc {
  cursor: pointer;
}

.firstActive,
.secondActive {
  color: #74C8C5;
}

.headline-mounth-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ***************** */

.calendar-top-container {
  width: 97%;
  margin: auto;
  padding-top: 30px;
}

.close {
  display: flex;
  justify-content: flex-end;
}

.mount-container-icon {
  display: flex;
}

.mount-container h1 {
  font-family: Montserrat-Medium;
  font-size: 30px;
  margin-right: 18px;
}

.mount-title {
  font-style: normal;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
  color: #CC003D;
}

.mount-title::first-letter {
  color: yellow;
}

.calendar-container {
  border: 1px solid #BDBCBA;
  padding-top: 16px;
  margin-top: 10px;
}

/* -------Time Title------ */

.time-title {
  width: 100%;
  background: #74C8C5;
  height: 46px;
  margin-top: 30px;
  display: flex;
  align-items: center;
}

.time-title h2 {
  margin: 0;
  letter-spacing: 0.2em;
  margin-left: 25px;
  color: #FFFFFF;
  font-family: "Second-Montserrat-Bold";
  letter-spacing: 0.2em;
  -webkit-text-stroke: 1px black;
}

/* --------------- */

.calendar-wrapper {
  display: flex;
  width: 100%;
}

.view-container {
  position: relative;
}

.View {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background: #B0B0B0;
  border-radius: 5px;
  width: 88px;
  height: 24px;
  margin-left: 15px;
  margin-top: 15px;
  margin-right: 25px;
}

.View div p {
  font-family: Montserrat-Medium;
  font-size: 11px;
  color: #ffffff;
}

.right-bg {
  width: 100%;
  height: 46px;
  background: #74C8C5;
  margin-top: 37px;
}

/* **************** */

.headline-dots-group {
  position: relative;
}

.dots-group {
  margin-left: 15px;
  margin-right: 15px;
}

.first-dot-group,
.second-dot-group {
  display: flex;
  align-items: center;
}

.first-dot-group {
  margin-bottom: 10px;
}

.dot {
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background: orange;
  margin: 0 10px 0 10px;
}

.dot-group {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

.dot-group div p {
  margin: 0;
  font-family: Montserrat-Medium;
  text-transform: capitalize;
  font-feature-settings: "case" on;
  color: #000000;
}

.dot-1 {
  background: #CC003D;
}

.dot-2 {
  background: #F79501;
}

.dot-3 {
  background: #74C8C5;
}

.dot-4 {
  background: #76ED00;
}

/**********************/

/* width */
::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #E5E5E5;
  border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #CC003D;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000;
}

@font-face {
  src: url(~@/assets/fonts/FontsForClosePage/Montserrat-Bold.ttf);
  font-family: "Second-Montserrat-Bold";
}

.Container {
  padding-bottom: 61px;
  overflow-y: auto;
}

.Flipped,
.Flipped .Content {
  transform: rotateX(180deg);
  -ms-transform: rotateX(180deg); /* IE 9 */
  -webkit-transform: rotateX(180deg); /* Safari and Chrome */
  height: 100%;
}

.Flipped {
  overflow-y: hidden;
}

.Content {
  width: max-content;
  background: #74C8C5;
  padding: 10px;
  padding-left: 0;
  padding-right: 0;
  height: 100%;
}

.time-container {
  padding: 10px;
  overflow-y: auto;
  overflow: hidden;
  flex-basis: 80%;
  margin-top: 15px;
  padding-bottom: 61px;
  padding-left: 0;
  padding-right: 0;
  flex-basis: auto;
}

ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

li {
  display: flex;
  white-space: nowrap;
  background: #FFFFFF;
  margin-right: 8px;
  border-radius: 7px;
  list-style-type: none;
  padding: 5px 10px 5px 10px;
  font-family: "Second-Montserrat-Bold";
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: #000000;
}

@font-face {
  src: url(~@/assets/GlobalFonts/Montserrat-Medium.ttf);
  font-family: "Montserrat-Medium";
}
</style>

<style>
.vue-switcher-theme--bootstrap.vue-switcher-color--danger.vue-switcher--unchecked
  div,
.vue-switcher-theme--bootstrap.vue-switcher-color--danger div {
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  box-sizing: border-box;
  box-shadow: inset 0px 0px 5px rgb(0 0 0 / 25%);
}

.vdpInnerWrap {
  position: absolute;
  width: 100%;
  left: 320px;
  top: 50%;
  transform: translateY(-15%);
}

@media screen and (max-width: 630px) {
  .vdpInnerWrap {
    position: static;
    left: 0;
    top: 0;
    transform: translateY(0);
  }
}
</style>

<script>
import Switches from "vue-switches";
import DatePick from "vue-date-pick";
import fecha from "fecha";
import "./vueDatePick.scss";
let ts = require("time-slots-generator");

export default {
  name: "HelloWorld",
  data() {
    return {
      enabled: false,
      showCalendar: false,
      format: "dddd, MMMM D",
      date: fecha.format(new Date(), "dddd, MMMM D"),
      timeSlots: ts.getTimeSlots([], true, "quarter"),

      girlsList: [
        {
          avatarSrc: "https://i.ibb.co/G0nLSQ8/Girl-1.png",
          girlName: "Milena Williams",
          girlTime: "12:00 - 16:00 PM",
        },
        {
          avatarSrc: "https://i.ibb.co/qJB12x6/Girl-2.png",
          girlName: "Milena Williams",
          girlTime: "12:00 - 16:00 PM",
        },
        {
          avatarSrc: "https://i.ibb.co/6sHVnmD/Girl-3.png",
          girlName: "Milena Williams",
          girlTime: "12:00 - 16:00 PM",
        },
        {
          avatarSrc: "https://i.ibb.co/tb5z0Yg/Girl-4.png",
          girlName: "Milena Williams",
          girlTime: "12:00 - 16:00 PM",
        },
        {
          avatarSrc: "https://i.ibb.co/q9SfcrS/Girl-5.png",
          girlName: "Milena Williams",
          girlTime: "12:00 - 16:00 PM",
        },
        {
          avatarSrc: "https://i.ibb.co/TrybWr6/Girl-6.png",
          girlName: "Milena Williams",
          girlTime: "12:00 - 16:00 PM",
        },
        {
          avatarSrc: "https://i.ibb.co/q9SfcrS/Girl-5.png",
          girlName: "Milena Williams",
          girlTime: "12:00 - 16:00 PM",
        },
        {
          avatarSrc: "https://i.ibb.co/TrybWr6/Girl-6.png",
          girlName: "Milena Williams",
          girlTime: "12:00 - 16:00 PM",
        },
      ],
    };
  },

  methods: {
    showCalendarFunc() {
      this.showCalendar = !this.showCalendar;
    },
    parseDate(dateString, format) {
      return fecha.parse(dateString, format);
    },
    formatDate(dateObj, format) {
      return fecha.format(dateObj, format);
    },
  },

  components: {
    Switches,
    DatePick,
  },
};
</script>

{{inputValue.split（“，”[0]}，
{{inputValue.split（“，”[1]}

本周


下个星期

斯坦达特

斯坦达特

斯坦达特

斯坦达特

姑娘们
{{item.girlName}

{{item.girlTime}
颗粒物


{{item}}




{{item}}


看法

.日期容器{
高度：56px；
背景：#2d2d；
}
/*女孩名单*/
.女孩姓名容器{
显示器：flex；
证明内容：柔性端；
}
.女孩名单{
高度：350px；
填充顶部：10px；
溢出：自动；
方向：rtl；
}
.女孩信息{
显示器：flex；
对齐项目：柔性端；
弯曲方向：行反向；
边缘底部：5px；
}
.女童资讯组{
右边距：10px；
边界半径：5px；
宽度：91px；
高度：50px；
最大宽度：100%；
}
.女童资讯组{
字体系列：“蒙特塞拉特中等”；
字体大小：13px；
保证金：0；
}
.女孩时代，
.时间的一天{
字体大小：10px；
字体系列：“蒙特塞拉特中等”；
字号：600；
}
.女孩时光容器{
显示器：flex；
弯曲方向：行反向；
}
.女孩时代{
右边距：5px；
颜色：#CC003D；
}
.时间的一天{
颜色：#000000；
}
/* ****************** */
/*时间进程*/
.时间进度容器{
宽度：100%；
身高：100%；
背景：橙色；
边缘顶部：10px；
}
/* ****************** */
/*交换式集装箱*/
.日期{
颜色：#000；
}
.vue-switcher-theme--bulma.vue-switcher-color--default.vue-switcher--unchecked
部门：之后{
背景色：#F5！重要；
}
.交换式集装箱{
显示器：flex；
对齐项目：居中；
}
.中转货柜组{
字体系列：蒙特塞拉特中型；
字体大小：10px；
}
.交换子容器{
利润率：0 10px 0 10px；
}
.开关说明{
光标：指针；
}
.firstActive，
.secondActive{
颜色：#74C8C5；
}
.h.货柜{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
}
/* ***************** */
.日历顶部容器{
宽度：97%；
保证金：自动；
填充顶部：30px；
}
.结束{
显示器：flex；
证明内容：柔性端；
}
.安装容器图标{
显示器：flex；
}
.安装容器h1{
字体系列：蒙特塞拉特中型；
字体大小：30px；
右边距：18px；
}
.山名{
字体风格：普通；
字体大小：粗体；
线高：40px；
文本对齐：居中；
颜色：#CC003D；
}
.mount title：：第一个字母{
颜色：黄色；
}
.日历容器{
边框：1px实心#BDBCBA；
填充顶部：16px；
边缘顶部：10px；
}
/*------时间标题------*/
.时间标题{
宽度：100%；
背景#74C8C5；
高度：46px；
边缘顶部：30px；
显示器：flex；
对齐项目：居中；
}
.时间标题h2{
保证金：0；
字母间距：0.2米；
左边距：25px；
颜色：#FFFFFF；
字体系列：“第二蒙特塞拉特黑体”；
字母间距：0.2米；
-webkit文本笔划：1px黑色；
}
/* --------------- */
.日历包装{
显示器：flex；
宽度：100%；
}
.观景台
.calendar-wrapper {
    display: flex;
    width: 100%;
    height: calc(100vh - (112px));
}