时间戳

首页 > 解决方案 > 我需要有关如何使 div 占据父 div verticallt 100% 的帮助

html - 我需要有关如何使 div 占据父 div verticallt 100% 的帮助

问题描述

我需要一个解决方案，我希望粉红色和白色的两个盒子与蓝色盒子中的父容器具有相同的高度（即在蓝色盒子停止的地方停止），而不取决于粉色和白色盒子中 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>

标签： html

解决方案

如果您可以使用 flexbox，则可以执行以下操作：

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

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

推荐阅读