主页 / 问题 / 943632
Accepted
Jarry Roxwell
Asked:2020-02-12 01:29:08 +0000 UTC2020-02-12 01:29:08 +0000 UTC

如果父级的高度在 min-height 中指定，则块高度为 100%

  • 772

如果父块的高度为min-height，子块如何继承该高度？

height: 100%子块没有给出预期的结果，当改变时position，也有困难，特别是填充（是的，你可以做到height: calc(100% - 10px);），但由于某种原因，在我看来，这个解决方案类似于拐杖。有没有办法更简洁地做到这一点？

.container{
  display: inline-block;
  margin-right: 10px;
  vertical-align: top;
}
.parent-flex-el{
  background-color: white;
  padding: 5px 10px;
  border: 3px solid black;
  width:100px;
  margin-bottom: 10px;  
}
.flex-el{
  background-color: lightgrey;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  height: 100%;
}
.child-flex-el{
  width: 100%;  
  line-height: 20px;
  text-align: center;
  background-color: yellow;
  margin: 5px 0px;
  height: 20px;
}
/*-------*/
.fixed-h{
  height: 200px;
 }
.min-h{
  min-height: 200px;
 }
.position{
  position: relative; 
}
.position > *{
  position:absolute;  
  width: 100%;
}
.h-calc > *{
  height: calc(100% - 10px);
}
.fl{
  display:flex;
  flex-flow: row nowrap;
  align-items: stretch;
}
.fl > *{
  width: 100%;
}
<div class="container">
  <p>height: 200px;</p>
  <div class="parent-flex-el fixed-h">
    <div class="flex-el">
      <div class="child-flex-el">one</div>
      <div class="child-flex-el">two</div>
      <div class="child-flex-el">three</div>
    </div>
  </div>
</div>
<div class="container">
  <p>min-height: 200px;</p>
  <div class="parent-flex-el min-h">
    <div class="flex-el">
      <div class="child-flex-el">one</div>
      <div class="child-flex-el">two</div>
      <div class="child-flex-el">three</div>
    </div>
  </div>
</div>
<div class="container">
  <p>position: absolute;</p>
  <div class="parent-flex-el min-h position">
    <div class="flex-el">
      <div class="child-flex-el">one</div>
      <div class="child-flex-el">two</div>
      <div class="child-flex-el">three</div>
    </div>
  </div>
</div>
<div class="container">
  <p>height: calc();</p>
  <div class="parent-flex-el min-h position h-calc">
    <div class="flex-el">
      <div class="child-flex-el">one</div>
      <div class="child-flex-el">two</div>
      <div class="child-flex-el">three</div>
    </div>
  </div>
</div>
<div class="container">
  <p>flex</p>
  <div class="parent-flex-el min-h fl">
    <div class="flex-el">
      <div class="child-flex-el">one</div>
      <div class="child-flex-el">two</div>
      <div class="child-flex-el">three</div>
    </div>
  </div>
</div>

html

1 个回答

  1. Best Answer

    使父块flex欧姆，子块在宽度上伸展。

    .container {
  display: inline-block;
  margin-right: 10px;
  vertical-align: top;
}

.parent-flex-el {
  background-color: white;
  padding: 5px 10px;
  border: 3px solid black;
  width: 100px;
  margin-bottom: 10px;
}

.flex-el {
  background-color: lightgrey;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}

.child-flex-el {
  width: 100%;
  line-height: 20px;
  text-align: center;
  background-color: yellow;
  margin: 5px 0px;
  height: 20px;
}

/*-------*/

.min-h {
  min-height: 200px;
}

.fl {
  display: flex;
}

.fl>* {
  width: 100%;
}
    <div class="container">
  <p>flex</p>
  <div class="parent-flex-el min-h fl">
    <div class="flex-el">
      <div class="child-flex-el">one</div>
      <div class="child-flex-el">two</div>
      <div class="child-flex-el">three</div>
    </div>
  </div>
</div>

    • 1

相关问题