Question

我在父div中有2个div：

.core {
  height: 200px;
  /* 200% px is just for showcase, in my app I am using % of another div... */
  background-color: yellow;
}

.boxName {
  display: block;
  position: relative;
}

.boxName span {
  background-color: black;
  color: white;
}

.basicInfo {
  position: relative;
  /*margin-bottom and bottom don't change anything*/
  /*height sets height but including height of the title
        height: 100%;
        margin-bottom: 0%;*/
  bottom: 0%;
  width: 30%;
  background-color: green;
}

<div class="core">
  <div class="boxName"><span>Title</span></div>
  <div class="basicInfo">
    How to set height of this div to the bottom of core div?
  </div>
</div>

现在我想确保basicInfo div结束core div结束的位置（底部对齐）。

我尝试过其他帖子中的大量内容，例如display：flex，bottom：0％，margin-bottom：0％等。

我很高兴听到你说我做错了什么。我宁愿不在这种情况下使用position：absolute。

Fiddle

谢谢，马尔钦

Answer 1

只需使用flex：

＆＃13;

this.props.dispatch(updateGrouping(value))

＆＃13;

.core {
  height: 200px;
  background-color: yellow;


  /* add these */
  display: flex;
  flex-direction: column;
}

.boxName {
  display: block;
  position: relative;
}

.boxName span {
  background-color: black;
  color: white;
}

.basicInfo {
  position: relative;
  width: 30%;
  background-color: green;


  /* add this (makes the second div grow to fill the rest of the column) */
  flex-grow: 1;
}

＆＃13;

Answer 2

您可以使用public function destroy($id) { $user = User::findOrFail($id); if(isset($user->photo->file) && File::exists($user->photo->file)){ unlink(public_path().$user->photo->file); $user->delete(); Session::flash('deleted_user','The user has been deleted'); return redirect("/admin/users"); }else{ $user->delete(); Session::flash('deleted_user','The user has been deleted'); return redirect("/admin/users"); } }来实现此目的。在这里，我从calc中减去18px，因为100%的高度为title

18px

.core{
  height: 200px; /* 200% px is just for showcase, in my app I am using % of another div... */
  background-color: yellow;
}
.boxName{
    display: block;
    position: relative;
}

.boxName span { 
    background-color: black; 
    color: white;
}

.basicInfo{    
    position: relative;
    /*margin-bottom and bottom don't change anything*/
    /*height sets height but including height of the title    
    margin-bottom: 0%;*/
    height: calc(100% - 18px);
    bottom: 0%;
    width: 30%;
    background-color: green;
}

Answer 3

删除.core div

上的高度限制

<div class="core">
  <div class="contain">
   <div class="boxName"><span>Title</span></div>
   <div class="basicInfo">
      How to set height of this div to the bottom of core div?
    </div>
   </div>
 </div>


.core{
  background-color: yellow;
}
.boxName{
    display: block;
    position: relative;
}

.boxName span { 
    background-color: black; 
    color: white;
}

.basicInfo{    
    position: relative;
    /*margin-bottom and bottom don't change anything*/
    /*height sets height but including height of the title
    height: 100%;
    margin-bottom: 0%;*/
    bottom: 0%;
    width: 30%;
    background-color: green;
}

Answer 4

给baiscInfo类提供下面显示的样式 -

.basicInfo{
  margin: 0px;
  position: relative;
  background-color: green;
  height: 100%;

}

这对我来说真是太好了！

Answer 5

＆＃13;

.core {
  height: 200px;width:100%;
  /* 200% px is just for showcase, in my app I am using % of another div... */
  background-color: yellow;
  position:absolute;
}

.boxName {
  display: block;
  height:auto;
}

.boxName span {
  background-color: black;
  color: white;
}

.basicInfo {
  position: relative;
  /*margin-bottom and bottom don't change anything*/
  /*height sets height but including height of the title
        height: 100%;
        margin-bottom: 0%;*/
  bottom: 0%;
  width: 30%;
  top:145px;

  background-color: green;
}

＆＃13;

<div class="core">
  <div class="boxName"><span>Title</span></div>
  <div class="basicInfo">
    How to set height of this div to the bottom of core div?
  </div>
</div>

＆＃13;

检查这是否有帮助。尝试调整顶部：145px＆＃39;

Answer 6

＆＃13;

.core{
  height: 200px; /* 200% px is just for showcase, in my app I am using % of another div... */
  background-color: yellow;
  display:flex;
  flex-direction:column;
}
.boxName{
    display: block;
    position: relative;
}

.boxName span { 
    background-color: black; 
    color: white;
}

.basicInfo{    
    position: relative;
    /*margin-bottom and bottom don't change anything*/
    /*height sets height but including height of the title    
    margin-bottom: 0%;*/
    /*height: 100%;*/
    /*bottom: 0%;*/
    width: 30%;
    background-color: green;
    flex-grow: 1;
}

＆＃13;

<div class="core">
     <div class="boxName"><span>Title</span></div>
     <div class="basicInfo">
        How to set height of this div to the bottom of core div?
     </div>
</div>

＆＃13;

将div的高度设置为父div的底部

6 个答案: