CODEWITHSUNDEEP
htmlcssflexbox
Marcin Gałązka
Marcin Gałązka

Reputation: 29

setting div's height to the bottom of parent div

I have 2 divs in parent 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>

Now I would like to make sure that basicInfo div ends where core div ends (bottoms are aligned).

I tried numerous things from other posts, such as display: flex, bottom: 0%, margin-bottom: 0%, etc.

I would be happy to hear from you what I am doing wrong. I would rather not use position: absolute in this case.

Fiddle.

Thanks, Marcin

Upvotes: 0

Views: 74

Answers (6)

Adesh Kumar
Adesh Kumar

Reputation: 960

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

Check whether this helps. try to adjust 'top:145px'

Upvotes: 0

bilu sau
bilu sau

Reputation: 61

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

Upvotes: -1

Evading Shadows
Evading Shadows

Reputation: 489

Give the baiscInfo class the style showed below -

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

}

That is what is doing great for me!

Upvotes: 0

Zuber
Zuber

Reputation: 3473

You can use calc to achieve this. here i have subtract 18px from the 100% because of title has height of 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>

Upvotes: 1

billy.farroll
billy.farroll

Reputation: 1921

Remove the height restriction on the .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;
}

Upvotes: 0

Pete
Pete

Reputation: 58462

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

Upvotes: 3

Related Questions