我需要有关如何使 div 垂直占据父 div 100% 的帮助答案

【问题标题】：i need help on how to make a div occupy 100% of parent div verticallt我需要有关如何使 div 垂直占据父 div 100% 的帮助
【发布时间】：2020-05-25 21:01:26
【问题描述】：

我需要一个解决方案伙计们，我希望粉红色和白色的两个盒子与蓝色盒子中的父容器具有相同的高度（即在蓝色盒子停止的地方停止）而不依赖于粉红色 div 的内容和白盒子。这是我的小提琴代码 https://jsfiddle.net/dcq4bufa/3/

我的 HTML 代码

<head>
  <title>eco</title>
</head>
<body>
  <header class="header">
    <ul class="nav">
      <li class="nav-items">HOME</li>
      <li class="nav-items">APP</li>
      <li class="nav-items">STORE</li>
   </ul>

   <div class="home">
     <div class="home__right">
       <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente nemo 
     aliquid saepe tempora doloribus dicta quas aperiam, eius odio ipsa culpa ipsam rerum quam vero 
        itaque, recusandae sint perferendis ipsum.</p>
      <h1 class="home__right--sub"> tenetur quidem ducimus quod odit totam, dolor</h1> 
     </div>
     <home class="home__left">
       <h1 class="paragraph">Lorem ipsum dolor sit amet, consectetur ad</h1>
     </home>
   </div>
  </header>
</body>

【问题讨论】：

这个问题可能会加倍：stackoverflow.com/questions/1098219/…
将height: inherit; 添加到.home 类
覆盖超过高度，进一步覆盖100vh。
这能回答你的问题吗？ Make a div fill the height of the remaining screen space

标签： html

【解决方案1】：

首先您必须勾勒出父容器（蓝色）的高度，然后将两个子元素（粉色和白色）的高度设置为 100%，因为它们位于设备高度 100 的容器中。试试这个：

.home {
  display: flex;
  height:100vh;

  &__right {
    background-color: pink;
    height:100%;
    flex-basis: 50;

  }

  &__left {
    background-color: white;
    height:100%;
    flex: 1;

  }

}

如果对溢出不满意，可以调整.home的高度

【讨论】：

【解决方案2】：

如果你可以使用 flexbox，你可以这样做：

.header {
  height: 80vh;
  background-color: blue;
  /* Add flexbox */
  display: flex;
  flex-direction: column;
}

.home {
  display: flex;
  flex: 1; /* Set flex-grow: 1 */
  ...

【讨论】：