Question

每当我在height中设置.task的{{1}}时，我就会遇到问题，那么它%会变成height。0但与此同时，如果我将position更改为absolute或fixed ......它的工作正常......为什么？

＆＃13;

* {
  font-family: monospace;
  padding: 0;
  margin: 0;
}
section{
  margin-top: 8vh;
  min-height: 87vh;
  width:100%;
  position: relative;
  background-color: white;
}
section>.app{
  width: calc(100% - 22vh);
  min-height: inherit;
  background-color: inherit;
  left: 11vh;
  position: relative;
  padding-top: 5vh;
  box-sizing: border-box;
}
section>.app>input[type="search"]{
  width: 100%;
  font-size: 200%;
  outline: none;
  position: relative;
  height: 7vh;
  border: none;
  border-bottom: 0.5vh solid white;
  color: deepskyblue;
  background-color: deepskyblue;
  box-sizing: border-box;
  padding-right: 0.25em;
  padding-left: 0.25em;
}
section>.app>input[type="search"]:valid{
  background-color: white;
  color: deepskyblue;
  border-bottom-color: deepskyblue;
}
section>.app>input[type="search"]::-webkit-input-placeholder{
  color: white;
}
section>.app>input[type="search"]::-moz-placeholder{
  color: white;
}
section>.app>input[type="search"]:-ms-input-placeholde {
  color: white;
}
section>.app>input[type="search"]::placeholde {
  color: white;
}
section>.app>input[type="search"]:focus{
  border-bottom-color: deepskyblue;
  background-color: inherit;
}
section>.app>input[type="search"]:focus::-webkit-input-placeholder{
  color: transparent;
}
section>.app>input[type="search"]:focus::-moz-placeholder{
  color: transparent;
}
section>.app > input[type="search"]:focus:-ms-input-placeholder {
  color: transparent;
}
section>.app>input[type="search"]:focus::placeholder{
  color: transparent;
}
section>.app>div.tasks{
  background-color: black;
  position: relative;
  margin-top: 5vh;
  width: 100%;
  min-height: 70vh;
}
section>.app>div.tasks>.task {
  height: 10%;
  width: 50%;
  position: relative;
  background-color: white;
}

＆＃13;

<section>
  <div class="app">
    <input type="search" placeholder="Search For Task List..." spellcheck="false" required="required"/>
    <div class="tasks">
      <div class="task"></div>
    </div>
  </div>
</section>

＆＃13;

我无法将position: absolute;设置为parent元素height将不再是relative给它的孩子。< / p>

您还可以在codepen上查看完整的项目：

Project at codepen

由于样式导致了这个问题，如果删除会导致我的项目出现问题....如果是这样，plz建议替代方案。

Answer 1

如果我理解正确，那么当你明确地为height = 0类height: 10%;启动该属性时，你会问.task为什么。这是因为position: relative;属性不会从 flow 中获取元素。例如，当您使用position: absolute;时，它会将该元素从 flow 中取出，然后它会使它具有不同的高度。

如果位置是静态或相对的，则％= 0的高度

1 个答案: