為什么我的 React demo App 父樹設置的 height:100% 改為 100vh？

Question

我正在創建一個 web 應用程序，我希望當用戶按下漢堡包按鈕時， side drawer將整個內容推到右側。

在下面的鏈接中，您將看到一個虛擬的Main組件，它模擬放置在 header 和頁腳中的任何內容。

在Layout Component's grid中，我的意思是讓main部分的row height為auto以利用設置header和footer后剩余的所有可用空間。 為了確保這能正常工作，我在所有父tags中添加了height: 100% ，直到root html 。

如果我在Main內設置的任何高度超過viewport左側的總高度（檢查browser dev tools上的移動視圖），頁面會中斷，內容會溢出總height 。 您會注意到， Backdrop和SideDrawer將不再覆蓋整個頁面，只留下一部分。

我想要一種行為，當main內容變得大於100%高度剩下的內容時，所有內容都會被向下推，並且瀏覽器會讀取100% height ，包括內容。

這是為什么？ 我究竟做錯了什么？

我將在這里添加我的sidedrawer和Layout的東西，因為你可以在這里測試這個小演示

import React, { useState } from "react";
import "./Layout.scss";
import Toolbar from "../../Components/Toolbar/Toolbar";
import Footer from "../../Components/Footer/Footer";
import SideDrawer from "../../Components/Sidebar/SideDrawer";

const Layout = props => {
  const [toggler, setToggler] = useState(false);
  const buttonTogglerHandler = () => {
    setToggler(!toggler);
  };
  const cssClasses = [
    "Layout",
    toggler ? "Layout__slideOn" : "Layout__slideOff"
  ];
  return (
    <div className={cssClasses.join(" ")}>
      <Toolbar toggler={toggler} onToggled={buttonTogglerHandler} />
      <SideDrawer show={toggler} close={buttonTogglerHandler} />
      <main>{props.children}</main>
      <Footer />
    </div>
  );
};

export default Layout;

.Layout {
  height: 100%;
  width: 100%;
  display: grid;
  grid: {
    template-rows: 3rem auto 5rem;
    template-areas: "header" 
                    "main" 
                   "footer"
  }

&__slideOn {
animation: slideLayout 300ms forwards ease-in;
@keyframes slideLayout {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(80%);
  }
}
}

&__slideOff {
  animation: unslideLayout 300ms forwards ease-out;
  @keyframes unslideLayout {
  0% {
    transform: translateX(80%);
  }

  100% {
    transform: translateX(0)
  }
  }
}
  & main {
    grid-area: main;
  }

  & footer {
    grid-area: footer;
  }
}

import React, { Fragment } from "react";
import "./Sidebar.scss";
import Backdrop from "../../UI/Backdrop/Backdrop";
import CSSTransition from 'react-transition-group/CSSTransition';

const SideDrawer = props => {
  return (
    <CSSTransition
      in={props.show}
      mountOnEnter
      unmountOnExit
      timeout={300}
      classNames={{
        enterActive: "Sidebar__open",
        exitActive: "Sidebar__close"
      }}
    >
      <Fragment>
        <div className="Sidebar">sidebar</div>
        <Backdrop show={props.show} closeBackdrop={props.close} />
      </Fragment>
    </CSSTransition>
  );
};

export default SideDrawer;

.Sidebar {
  position: fixed;
  top: 0;
  left: -80vw;
  bottom: 0;
  width: 80vw;
  background-color: blue;
  opacity: .5;

  &__open {
    animation: openSidebar 300ms forwards ease-in;
    @keyframes openSidebar {
      0% {
        transform: translateX(0)
      }
      
      100% {
        transform: translateX(80%)
      }
    }
  }

  &__close {
    animation: closeSidebar 300ms forwards ease-out;
    @keyframes closeSidebar {
      0% {
        transform: translateX(0)
      }
      
      100% {
        transform: translateX(-100%)
      }
    }
  }
}

Answer 1

我的父樹應該設置為 100%，直到我讓div持有.Layout class 。 在這個元素上，必須添加min-height功能，以擴展component tree upstream的100%屏幕集。

這意味着component tree ，從html到Layout Component的上一層，后者包含一個具有auto height設置的中間grid row ，然后能夠在需要時將此row擴展到100% height ：

• 如果app屏幕的總height高於viewport

• 如果app程序的總高度小於viewport口，還將確保app覆蓋至少100%的視口。

然后提供整個應用程序的覆蓋范圍，從header到footer 。

這是@ CodeSandBox的正確行為