Question

我似乎无法让最小高度工作。主要问题是，我的孩子没有父母的身高，因此没有设定自己的身高。我该如何解决这个问题？

＆＃13;

#middle_Wrapper {
  width: 100%;
  min-height: 85vh;
  max-height: 500%;
  height: auto;
}

#main {
  width: 90%;
  height: 100%;
  background-color: red;
  opacity: 0.2;
  position: relative;
}

＆＃13;

<div id="middle_Wrapper">
  <main id="main">
     test
  </main>
</div>

＆＃13;

Answer 1

将height : auto更改为height : 0

＆＃13;

#middle_Wrapper {
  width: 100%;
  min-height: 50vh;
  max-height: 500%;
  height: 0; /* change this line */
}

#main {
  width: 90%;
  height: 100%;
  background-color: red;
  opacity: 0.2;
  position: relative;
}

＆＃13;

<div id="middle_Wrapper">
  <main id="main">
     test
  </main>
</div>

＆＃13;

Answer 2

只需添加css即表示您正在使用%，因此请将其更改为vh。

#main {
  height: 100vh;
}

#middle_Wrapper {
  width: 100%;
  min-height: 50vh;
  max-height: 500%;
  height: auto;
}

#main {
  width: 90%;
  height: 100vh;
  background-color: red;
  opacity: 0.2;
  position: relative;
}

<div id="middle_Wrapper">
  <main id="main">
     test
  </main>
</div>

当父母设置了最小高度时，孩子不会扩展

2 个答案: