установка высоты div в нижней части родительского div

Question

У меня есть 2 div в родительском 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>

Теперь я хотел бы убедиться, что div div basicInfo заканчивается там, где заканчивается основной div (днища выровнены).

Я пробовал множество вещей издругие сообщения, такие как display: flex, bottom: 0%, margin-bottom: 0% и т. д.

Я был бы рад услышать от вас, что я делаю неправильно.Я бы предпочел не использовать позицию: абсолютная в этом случае.

Fiddle .

Спасибо, Марсин

Answer 1

.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;
}

<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>

Проверьте, помогает ли это.попробуйте настроить 'top: 145px'

Answer 2

.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;
}

<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>

Answer 3

Дайте классу baiscInfo стиль, показанный ниже -

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

}

Это то, что отлично подходит для меня!

Answer 4

Вы можете использовать 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;
}

<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>

Answer 5

Снять ограничение по высоте на .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 6

Просто используйте flex:

.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;
}

<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>