时间戳

首页 > 解决方案 > 当 css 位于两个单独的文件中时修复 div 大小

css - 当 css 位于两个单独的文件中时修复 div 大小

问题描述

目标：使绿色容器与蓝色容器的高度相匹配。

在此处输入图像描述

我文件中的dashboarddiv 类Dashboard.js不适合100vh我在DashboardLayout.jsdiv 类中设置的内容：

<div className="dashboard__layout">
        <div className="dashboard__layoutLeft">
          <div className="linkspace__container">
            <button>{user[0].toUpperCase()}</button>
            <button className="add__profileButton">+</button>
          </div>
        </div>
        <div className="dashboard__layoutRight">
          <Header {...props} />
          {props.children}
        </div>
      </div>

.dashboard__layout {
  display: flex;
  min-width: 100%;
  height: 100vh;
}

这里的Dashboard.js文件和dashboard我试图适应DashboardLayoutdiv 的类：

<div className="dashboard">
      <div className="dash__left">
        <Sidebar />
      </div>
      <div className="dash__middle">
        <LinkButtonTypes />
        <ContentContainer />
      </div>
      <div className="dash__right">
        <PersonalUrl />
        <PhoneMockup />
      </div>
    </div>

.dashboard {
  display: flex;
  position: relative;
  justify-content: space-between;
  max-width: 100%;
  height: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
  background-color: blue;
}

标签： css

解决方案

根据您可以在元素上提供的高度，您可以创建不同的解决方案。下面是一个使用 flexbox 创建多个相邻列的示例：

      .parent {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 100vh;
      }
      .top-left {
        background-color: red;
        height: 20vh;
        width: 20%;
      }

      .bottom-left {
        height: 80vh;
        width: 20%;
        background-color: green;
      }
      .right {
        height: 100vh;
        width: 80%;
        background-color: blue;
      }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

  </head>
  <body>
    <div class="parent">
      <div class="top-left"></div>
      <div class="bottom-left"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

这是一个示例，您必须知道红色块的高度并使用绝对位置而不是 flexbox：

      body {
        display: flex;
      }
      .parent {
        width: 20%;
        position: relative;
        height: 100vh;
      }

      .top-left {
        background-color: red;
        position: absolute;
        height: 100px;
        width: 100%;
      }

      .bottom-left {
        box-sizing: border-box;
        padding-top: 100px;
        height: 100%;
        width: 100%;
        background-color: green;
      }
      .right {
        height: 100vh;
        width: 80%;
        background-color: blue;
      }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

  </head>
  <body>
    <div class="parent">
      <div class="top-left"></div>
      <div class="bottom-left"></div>
    </div>
    <div class="right"></div>
  </body>
</html>

当然，您可以根据要传递的高度值创建尽可能多的变化。

编辑：您提供蓝色部分内容的最后一个变体：

      body {
        display: flex;
      }
      .parent {
        width: 20%;
        position: relative;
      }

      .top-left {
        background-color: red;
        position: absolute;
        height: 100px;
        width: 100%;
      }

      .bottom-left {
        box-sizing: border-box;
        padding-top: 100px;
        height: 100%;
        width: 100%;
        background-color: green;
      }
      .right {
        width: 80%;
        background-color: blue;
        font-size: 50px;
      }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

  </head>
  <body>
    <div class="parent">
      <div class="top-left"></div>
      <div class="bottom-left"></div>
    </div>
    <div class="right">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nulla
      reprehenderit fugiat exercitationem molestias corporis. Officia quod atque
      deserunt possimus architecto enim. Aperiam earum, neque animi quis
      exercitationem cupiditate repellendus.
    </div>
  </body>
</html>

推荐阅读